CSS中的特殊性问题

Question

所以我在一个div类中有一个项目列表,book-select而li我的无序列表中的一个列表中有一个类selected.根据我定义的CSS规则,其中li的s div具有背景颜色skyblue,而li选择了类的那个则是steelblue.

问题是book-select类正在覆盖所选的类,我不明白.div类不会比选择类的li更具体吗？li是在div中的ul.

这是相关的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会将所选项目的类更改为点击的内容,最后一个文本"All"是默认选定的书.我可以使用不同的jQuery方法来改变背景颜色,但CSS给我这种特殊性错误的事实让我感到烦恼.

我知道.book-select li是覆盖,.select因为控制台显示background: steelblue;为已划掉.

不应该是相反的方式吗？是不是.selected更具体的类,因为它只包含一个元素,这本身就是？

Answer 1

使用此选择器可以增加该CSS规则的特定性:

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

关于"特定性":简单地说,一个类加一个标签(.book-select li)对于特定性而言只有一个类(.selected)的"权重" ,因此一个类加一个标记的规则将覆盖只有一个类的规则.上面显示的选择器将再次推翻它,因为它由两个类和一个标签组成.