CSS中如何防止子元素继承？

防止 CSS 中的子元素继承

在 CSS 领域，继承在根据父元素定义子元素的样式方面发挥着至关重要的作用。但是，在某些情况下，您可能希望覆盖此继承并独立自定义子元素的样式。

继承问题

考虑以下 HTML 结构：

<div>

使用此 CSS：

form div {font-size: 12px; font-weight: bold;}

通常，文本块“段落内容”和“跨度内容”将从其父表单继承字体大小和粗细。

防止继承

手动样式恢复：

覆盖继承的一种方法是手动恢复子元素上的样式更改：

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

添加多个类：

如果您可以控制标记，您可以添加其他类来定位特定元素：

form div.sub {color: red;}

form div div.content {/* Remains green */}

未来的解决方案：恢复属性

CSS 工作组目前正在探索 revert 属性：

div.content {
  all: revert;
}

此属性将允许您显式重置子元素上的所有继承样式。截至 2023 年 4 月，大多数现代浏览器（Safari 和 Internet Explorer/Edge 除外）都支持恢复属性。

以上是CSS中如何防止子元素继承？的详细内容。更多信息请关注PHP中文网其他相关文章！