CSS 中的特殊性问题

Posted 2023-03-06

【中文标题】CSS 中的特殊性问题

【英文标题】：Specificity issue in CSS

【发布时间】：2017-11-11 16:21:07

【问题描述】：

所以我有一个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 不是更具体的类吗，因为它只包含一个元素，就是它自己？

【参考方案1】：

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

.book-select li.selected 
   background: steelblue;

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

【讨论】：

啊，我明白了。那行得通。我认为随着您深入了解 DOM 树，特异性会起作用。我想，你越深入这棵树，它就越具体。就像一个包含一堆元素的 div 将不如该 div 中的单个元素那么具体。您是说它与规则本身中指定的内容有关吗？

整个事情是根据一个系统来工作的，这种系统给加起来的不同元素提供了“重量单位”。该值越高，特异性越高。这里有一篇文章，虽然老了但是还是有用的：css-tricks.com/specifics-on-css-specificity 还有这个网站：cssspecificity.com

【参考方案2】：

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

.selected 
    background: steelblue !important;

important 会避免这种样式被覆盖

【讨论】：

只有在你想覆盖背景的所有地方时才应该使用这个解决方案。

像任何事情一样，有时重要是有意义的，但根据我的经验，它们很少，通常有更好的方法。重要的事情往往会在你最意想不到的时候跳出来咬你

【参考方案3】：

即使是这么简单的事情

li.selected

background: steelblue;

应该为你覆盖背景:)