Question

因此，我在div内有一个项目列表book-select，而我的无序列表中的一个li包含类selected。根据我定义的CSS规则，li中的div具有背景颜色skyblue，而选定类的li将steelblue .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> 1}}。

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

以下是相关的CSS和HTML：

.book-select li

这是测验的一部分，其想法是用户点击一本书，jQuery会将所选项目的类更改为点击的内容，最后一个文本“全部”< / strong>是默认选择的书。我可以使用不同的jQuery方法来改变背景颜色，但CSS给我这种特殊性错误的事实让我感到烦恼。

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

不应该是相反的方式吗？ wmic /NODE:"Hostname" /USER:"Domain\AdminAcoount" OS GET numberofcores不是更具体的类，因为它只包含一个元素，它本身就是什么？

Answer 1

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

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

关于“特定性”：简单地说，一个类加一个标记（.book-select li）对于特定性的权重比单个类（.selected）更多，所以一个类加一个规则tag只会在一个类中覆盖规则。上面显示的选择器将再次推翻它，因为它包含两个类和一个标记。

Answer 2

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

.selected {
    background: steelblue !important;
}

重要的是避免这种风格被覆盖

Answer 3

甚至像

那样简单

li.selected
{
background: steelblue;
}

应该覆盖你的背景：）

CSS中的特殊性问题

以下是相关的CSS和HTML：

3 个答案: