html - CSS中的特异性问题

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

问题在于书籍选择类正在覆盖所选的类，我不理解。 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” 的li是默认选择的书。我可以使用其他jQuery方法来更改背景颜色，但是CSS给我这种特异性错误的事实困扰着我。

我知道.book-select li会覆盖.select，因为控制台将background: steelblue;显示为划线。

难道不是相反吗？ .selected是不是更具体的类，因为它仅包含一个元素，它本身就是元素？

最佳答案

使用此选择器可以提高该CSS规则的适用性:

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

关于“特异性”:简而言之，一类加一个标签(.book-select li)比一类(.selected)具有更多的“特异性”权重，因此具有一个类加一个标签的规则将覆盖仅具有一个类的规则。上面显示的选择器将再次覆盖该选择器，因为它包含两个类和一个标签。

关于html - CSS中的特异性问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44461345/