6

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

我已经阅读了W3 CSS3 选择器文档几次，这有助于我理解如何在 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;
}

鉴于上述情况，Link 1 和 Link 2 的样式将由.item aCSS 确定。为什么与.specialLink 2 关联的样式不优先？

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

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

但是，我觉得这是一个由于我缺乏理解而不得不加入的黑客行为。

4

3 回答 3

10

它基于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

于 2012-02-03T18:28:56.360 回答
2

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

  1. 计算选择器中 ID 属性的数量。
  2. 计算选择器中 CLASS 属性的数量。
  3. 计算选择器中 HTML 标记名称的数量。

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

于 2012-02-03T18:35:56.077 回答
1

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

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

编辑：哦，我看到您的链接与我的信息相同。对于那个很抱歉。

于 2012-02-03T18:29:34.307 回答