CSS 中的特殊性问题

Question

所以我有一个div 内的项目列表，其类为book-select，而我的无序列表中的li 之一具有类selected。根据我定义的 CSS 规则，div 中的li 的背景颜色为skyblue，而带有所选类的li 将是steelblue。

问题是 book-select 类正在覆盖选定的类，我不明白。 div 类不会比选择类的 li 更具体吗？ li 位于 ul 中，而 ul 位于 div 中。

这里是相关的 CSS 和 HTML：

.book-select li {
    font-size: 0.75em;
    text-align: center;
    list-style: none;
    background: skyblue;
    width: 25%;
    margin: auto;
}

.selected {
    background: steelblue;
}

<div class="book-select">
    <h2>Pick a book:</h2>
    <ul>
        <li>Set A Volume 1, Course Foundation</li>
        <li>Set A Volume 2, Expeditionary Airman</li>
        <li>Set A Volume 3, Professional Airman</li>
        <li>Set B Volume 1, Supervisory Communicator</li>
        <li>Set B Volume 2, Supervisor of Airmen</li>
        <li class="selected">All</li>
    </ul>
</div>

这是测验的一部分，其想法是用户单击一本书，jQuery 会将所选项目的类更改为单击的任何内容，最后一个 li 带有文本 "All" 是默认选择的书。我可以使用不同的 jQuery 方法来更改背景颜色，但是 CSS 给我这个特异性错误的事实让我很困扰。

我知道.book-select li 正在覆盖.select，因为控制台显示background: steelblue; 被划掉。

不应该反过来吗？ .selected 不是更具体的类吗，因为它只包含一个元素，就是它自己？

Answer 1

使用此选择器来增加该 CSS 规则的特异性：

.book-select li.selected {
   background: steelblue;
}

关于“特异性”：简单地说，一类加一个标签（.book-select li）在特异性方面比一个类（.selected）有更多的“权重”，所以一个类加一个标签的规则会覆盖一个规则只有一节课。上面显示的选择器将再次推翻这一点，因为它由两个类和一个标签组成。

Answer 2

对于可能的解决方案，您可以这样做：

.selected {
    background: steelblue !important;
}

important 会避免这种样式被覆盖

Answer 3

即使是这么简单的事情

li.selected
{
background: steelblue;
}

应该为你覆盖背景:)