继承 CSS 属性的特异性

Question

继承属性的 CSS 特异性程度如何？我通读了关于 CSS 特异性的 W3 建议，因此我了解如何计算直接针对同一元素的 css 规则的不同特异性，但我没有看到给出的特异性水平到继承的属性。

特别是，我遇到的问题与 header 元素有关，尽管我很想了解这个问题。

例如，这是 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 结构 & CSS:

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

<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, its parent is red - this text is black)</h2>
</div>

.all_red_text CSS 告诉 div.all_red_text 元素及其中的所有内容都具有红色文本。 h2 CSS 直接告诉 h2 元素有黑色文本。呈现 h2 时，它会看到 "my parent element wants me to have red text, but I'm directly being told to have black text"。同样的想法适用于进一步的父级，包括 HTML 和浏览器默认值 - 例如，这允许您在 html 元素上设置 font-family 并将其应用于上的所有内容您的（格式良好的）网页，除非有特定内容覆盖它。

如果你想让div.all_ted_text里面的h2也有红色文本，你需要直接告诉那些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 元素中的任何一个都没有设置颜色。根据color属性的定义，该值是继承自parent.

Answer 4

两个或多个选择器参与特异性War，当且仅当他们最终以完全相同的元素为目标。但是，如果两个选择器（针对同一元素）具有相同的特异性权重，那么还有其他因素，如您所说的，继承或样式在 css 文件中被覆盖。

继承 CSS 属性的特异性

Specificity of inherited CSS properties

css

css-specificity