CSS 特异性规则

Question

根据我读到的关于 css 特异性的内容，下面的例子应该给它红色，但真正的答案是蓝色。

最高 => 最低

样式，ID，class/psuedoclass/attr，元素

ul#awesome 有 101
ul.shopping-list li.favorite 跨度有 23

我哪里错了？

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
What is the color of the text Sausage ?

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

Answer 1

ul#awesome 将颜色添加到 ul，并通过继承将红色向下传递到 span。

但 ul.shopping-list li.favorite span 实际上是针对跨度，它优先。

如果你做了 ul#awesome span 或 #awesome span，它会变红

Answer 2

CSS 首先使用最具体的样式，如果不存在，它会变得更通用，直到找到适用的样式，即应用于 <p> 标签的样式被覆盖应用于嵌套在 <p> 标签中的 <a> 标签的样式。

在您的情况下，红色应用于整个无序列表，蓝色应用于特定列表项，这会覆盖整个列表的格式。仅当列表项没有自己的格式时才会使用红色。

CSS 特异性规则

CSS Specificity rule

selector

css-specificity