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

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/)，单词 "Sausage" 应该是红色的，但它显示为蓝色。为什么？

特异性值"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

Left to right, the highest number takes priority.

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

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

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

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

Answer 2

ul > li.favorite > span 比 ul#id

更具体 n

在 span 之外，外部选择器会更具体 - 查看实际效果

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

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

Answer 3

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

您可以通过将第二条规则替换为 "span" 的基本元素选择器来进行测试，您会看到在这种情况下牛奶和香肠都是蓝色的。

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

Can't figure our why CSS specificity isn't working

css

css-specificity