CSS 特性如何决定应用哪些样式？

Posted 2023-03-06

【中文标题】CSS 特性如何决定应用哪些样式？

【英文标题】：How does CSS specificity decide which styles to apply?

【发布时间】：2012-02-26 08:40:15

【问题描述】：

CSS 如何确定何时将一种样式应用于另一种样式？

我经历过几次W3 CSS3 selectors document，这有助于我了解如何在 jQuery 中更好地使用 CSS 选择器，但它并没有真正帮助我了解何时将一个 CSS 规则应用于另一个。

我有以下 html：

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

我有以下 CSS：

.item a 
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;


.special 
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;

鉴于上述情况，链接 1 和链接 2 的样式将相同，由 .item a CSS 确定。为什么与.special 关联的样式不优先链接 2？

显然，我可以这样绕过它：

.special 
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;

但是，由于缺乏理解，我觉得这是一个我必须散布的技巧。

【问题讨论】：

这个链接看起来很彻底，作为奖励，还有冲锋队和达斯维达的照片。 CSS Specificity

【参考方案1】：

我建议您熟悉this 以供将来参考。对于这种特殊情况，请注意级联顺序下的第 3 点：

统计选择器中 ID 属性的数量。 统计选择器中 CLASS 属性的数量。 统计选择器中 HTML 标记名称的数量。

如果将这些应用于您的代码，.item a 有 1 个类属性 + 1 个 HTML 标记名称，而 .special 只有一个类属性。因此，前者赢得了对特殊链接进行样式设置的权利。

【参考方案2】：

http://www.w3.org/TR/CSS21/cascade.html#specificity 是官方的具体规范。

但如果是 TL;DR，那么（太）短的版本是您的选择器中的单词越多，特异性就越高。 !important 甚至更高。就是这样。

编辑：哦，我看到您的链接与我的信息相同。对此感到抱歉。

【讨论】：

这不是真的，这取决于那些“词”是什么。更多并不总是意味着它更具体。

也许这就是为什么它是“太”短版本。

是的，这是真的。 W3C 是这么说的！哦等等，你的意思是我的话。这是为了回答为什么.item a 比.special 更具体的问题。对不起，如果我没有说清楚。该链接包含更多信息。

【参考方案3】：

它基于IDs、classes 和tags。 IDs 的特异性最高，然后是classes，然后是tags，所以：

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

以最多者获胜 :) 如果是平局，则以文件中最后出现的为准。请注意，1 0 0 击败 0 1000 1000

如果您想申请.special，请更具体：.item a.special

【讨论】：

这非常清楚。那么，如果我将.special 更改为a.special 它会赢，因为它是文档中的最后一个？

@Jonathan -- 是的，他们会打成平手，a.special 会赢。

关于“note”，取胜的风格是得分最高的，但是，它偏向于更高的特异性？例如，1 0 0 将击败 0 100 100。同样，0 1 100 会击败 0 0 1000?

@Jonathan 只是一个改进：属性也很重要。它们与类名具有相同的特异性。因此，例如img[title]（具有标题属性的图像）与img.cname（具有 class="cname" 的图像）一样具体

@Mr Lister：也是伪类（:not() 除外，它的工作方式不同）。伪元素与类型（而非标签）选择器属于同一类别。