CSS 中的特异性问题

Question

所以我在 div 中有一个项目列表，其中 class book-select 并且 li 中的一个 li 在我的无序列表中有 class selected。根据我定义的 CSS 规则，div 中的 li 具有背景颜色 skyblue，而 li 具有 class selected 将是 steelblue.

问题是书-select class 正在覆盖 selected class，我不明白。难道 div class 没有 class selected 的 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 会将 selected 项目的 class 更改为点击的内容, 最后一个带有文本 "All" 的 li 是默认的 selected 书。我可以使用不同的 jQuery 方法来更改背景颜色，但 CSS 给我这个特异性错误这一事实困扰着我。

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

不应该反过来吗？ .selected不是更具体吗class，因为它只包含一个元素，就是它本身？

Answer 1

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

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

关于 "specifity"：简单地说，一个 class 加一个标签 (.book-select li) 比一个 class (.selected)，所以一个 class 加一个标签的规则将覆盖只有一个 class 的规则。上面显示的选择器将再次否决它，因为它由两个 classes 和一个标签组成。

Answer 2

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

.selected {
    background: steelblue !important;
}

重要的是将避免此样式被覆盖

Answer 3

甚至像

这样简单的东西

li.selected
{
background: steelblue;
}

应该为您覆盖背景:)

CSS 中的特异性问题

Specificity issue in CSS

html

css

css-selectors

css-specificity

这是相关的 CSS 和 HTML: