继承的 CSS 属性的特殊性答案

【问题标题】：Specificity of inherited CSS properties继承的 CSS 属性的特殊性
【发布时间】：2015-04-09 19:20:39
【问题描述】：

继承的属性接收到的 CSS 特殊性级别是多少？我通读了关于 CSS 特异性的 W3 建议，因此我了解如何计算直接针对同一元素的 CSS 规则的不同特异性，但我没有看到那里提到赋予继承属性的特异性级别。

特别是，我遇到的问题与标题元素有关，但总的来说我很想了解这一点。

例如，这里是 HTML 的 sn-p：

<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; }

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

【问题讨论】：

属性根本没有特殊性。

标签： css css-specificity

【解决方案1】：

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

【讨论】：

然后展开，它是 element > id > class。
@slime 我想你打错了 - inline styles (1000) > #id (100) > .class (10) > element (1).
@slime 不完全是，请参阅：jsfiddle.net/kpodemski/grars8bm 并请参阅：code.tutsplus.com/tutorials/…
我想说，除非您无法更改标记，否则不要卡住或具体说明您的 CSS 继承。我建议看看这张幻灯片：slideshare.net/stubbornella/our-best-practices-are-killing-us.
没有与某些间接匹配相反的“直接”匹配，它是匹配的选择器，而不是声明。不存在优先级问题，尤其是声明优先于属性的问题。这个问题使用了非常不正确的术语，恐怕这个答案会增加混乱。

【解决方案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 被渲染时，它看到“我的父元素希望我有红色文本，但我直接被告知有黑色文本”。同样的想法也适用于更高级的父母，包括 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，尽管它们目前还没有深入研究继承的属性。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

也许学究式地说选择器具有特异性而不是属性本身，但已经存在模糊不清的实例（考虑 !important，它本质上为特定属性添加了 3 个级别的特异性，而不是属性本身W3 建议中提到）。从所有这些答案中得出的结论是，本质上还有另外四个特异性级别低于 W3 推荐为继承属性列出的四个级别。
不仅如此，而且由于每个父元素都可以从其父元素继承属性，这种特殊性本身的扩展可能会令人作呕。当然，人们也可以在任何时候“折叠”这些级别，使用到该点的计算值，这可能是一种更有用的思考方式 - 6 位特异性值，!important 占据最高位置，4对于匹配元素本身的选择器（我称之为“直接”），然后在底部封装所有继承属性的结果。
@process91，没有这样的模糊。您将特异性与级联混淆。特异性在那里发挥了作用，但混淆这两个保证你误解了级联是如何工作的，理论上和实践上——这已经够难了，不需要再模糊了。例如，!important 对特异性绝对没有影响。
@process91：从所有这些答案中得出的结论是，作者对整个级联有严重的误解。但公平地说，CSS2.1 规范使用术语“特异性”来指代内联样式声明的优先级，这在一定程度上造成了这种混淆，这些声明根本不是选择器。事实上，CSS 标准似乎对“特异性”没有明确的定义，因为即使是 3 级级联模块也使用术语“特异性”来指代声明，而不仅仅是选择器。

【解决方案4】：

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

【讨论】：