Question

所以我有以下代码：

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
<style>
    ul#awesome {
        color: red;
    }
    ul.shopping-list li.favorite span {
        color: blue;
    }
</style>

根据CSS特异性规则（https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/），“香肠”这个词应该是红色的，但它看起来是蓝色的。为什么呢？

“ul＃awesome”的特异性值= 0101 “ul.shopping-list li.favorite span”的特异性值= 0023 那么为什么香肠这个词仍然是蓝色的呢？根据我的理解，样式声明的顺序只对每个声明的特异性是相同的，而不是这里的情况。

Answer 1

特异性可由4列优先级表示：

inline = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

class = 0 | 0 | 1 | 0

element = 0 | 0 | 0 | 1

从左到右，最高的数字优先。

所以在你的情况下，你有：

ul#awesome - 0 | 1 | 0 | 1 - 不直接应用于该字词。

你有：

ul.shopping-list li.favorite span - 0 | 0 | 2 | 3 - 直接应用于该字词。

所以 0 | 0 | 2 | 3 比 0 | 1 | 0 | 1 更具体，因此它是蓝色而不是红色。

你可以测试你的css here

的特异性

如果您想使用ul#awesome将其设为红色，只需添加span

即可

＆＃13;

ul#awesome span {
  color: red;
}
ul.shopping-list li.favorite span {
  color: blue;
}

＆＃13;

<ul class="shopping-list" id="awesome">
  <li><span>Milk</span>
  </li>
  <li class="favorite" id="must-buy"><span class="highlight">Sausage</span>
  </li>
</ul>

＆＃13;

Answer 2

该范围从ul元素继承规则ul#awesome。规则ul.shopping-list li.favorite span直接选择span元素。继承规则的特异性为0，因此选择元素本身的任何规则都将获胜。

您可以使用＆＃34; span＆＃34;的基本元素选择器替换您的第二条规则进行测试，并且您会看到Milk和Sausage在这种情况下都是蓝色。

Answer 3

ul > li.favorite > span比ul#id更具体到水疗中心

在跨度之外，外部选择器将更具体 - 在操作中看到它

＆＃13;

ul#awesome {
  color: red;
}
ul.shopping-list li.favorite span {
  color: blue;
}

＆＃13;

<ul class="shopping-list" id="awesome">
  <li><span>Milk</span>
  </li>
  <li class="favorite" id="must-buy">Red <span class="highlight">Sausage</span>
  </li>
</ul>

＆＃13;

无法解释为什么CSS特异性不起作用

3 个答案: