Question

继承属性接收的CSS特异性级别是多少？我阅读了关于CSS特异性的W3建议，因此我理解如何计算直接针对相同元素的css规则的不同特性，但我没有提到对继承属性的特异性水平。

特别是，我遇到的问题与标题元素有关，但我一般都非常有兴趣了解它。

例如，这是一段HTML代码：

<h2>This should be black</h2>
<div class="all_red_text">
    <h2>This should be red</h2>
</div>

现在如果我包含这样的CSS：

.all_red_text { color: red; }

我会得到我期望的结果。另一方面，如果我包括的css是

h2 { color: black; }
.all_red_text { color: red; }

然后所有文本将为黑色。在第一种情况下，有一些默认的浏览器CSS可以被继承的属性覆盖，但是当在第二个示例中手动指定相同的属性时，它优先于继承的属性。

Answer 1

任何直接匹配元素的声明都将优先于从元素父级继承的属性。特异性与此无关。

Answer 2

CSS以这种形式应用于元素：

Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles

所以，使用你的HTML结构＆amp; CSS

<h2>This should be black (and is black)</h2>
<div class="all_red_text">
    (This text is indeed red.)
    <h2>This should be red (actually, it's parent is red - this text is black)</h2>
</div>

h2 { color: black; }
.all_red_text { color: red; }

.all_red_text CSS告诉div.all_red_text元素，其中的所有内容都有红色文字。 h2 CSS直接告诉h2元素有黑色文本。当h2被渲染时，它会看到＆＃34;我的父元素要我有红色文字，但我直接被告知要有黑色文字＆＃34;。同样的想法适用于进一步的父母，包括HTML和浏览器默认设置 - 例如，这允许您在font-family元素上设置html并将其应用于您的所有内容（格式正确））网页，除非特别覆盖它。

如果您希望h2内的div.all_ted_text也有红色文字，则您需要直接告诉这些h2元素有红色文字;像这样的东西：

.all_red_text h2 { color: red; }

CSS-Tricks has a pretty nice guide on this，虽然他们目前不太深入继承属性。

Answer 3

没有继承CSS属性的特殊性。选择器而不是属性具有特异性。

在您的示例中，两个h2元素只匹配其中一个规则h2 { color: black; }。因此，h2的颜色为黑色（假设没有其他样式表影响渲染）。在其他一些元素（包括第二个h2元素的父元素）上设置的任何内容都不会对此产生影响。

如果缺少规则h2 { color: black; }并且没有其他规则影响该情况，则h2元素中的任何一个都没有颜色设置。根据{{1}}属性的定义，该值将从父级继承。

继承CSS属性的特殊性

3 个答案: