Question

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

最高=＆gt;最低的

Style，ID，class / psuedoclass / attr，Element

ul＃awesome有101
ul.shopping-list li.favorite span有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中，并通过继承将红色向下传递到跨度。

但ul.shopping-list li.favorite span实际上是以跨度为目标，优先考虑。

如果您执行了ul#awesome span或#awesome span，它就会变红

Answer 2

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

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

CSS特异性规则

2 个答案: