浏览器应用的特定样式较少答案

【问题标题】：less specific style getting applied by browser浏览器应用的特定样式较少
【发布时间】：2018-03-18 19:52:30
【问题描述】：

<body>
    <section id="section">
        <nav class="class1 class2 class3">
            <ul class="class4 class5" id="ul">
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </nav>
    </section>
</body>

选择器 1：

.class2 .class5 > li > a {
    color: #777777;
}

对

选择器 2：

body #section .class1.class3 #ul {
    color: #fff;
}

显然选择器 2 具有更高的特异性，但浏览器仍将样式应用为选择器 1。

【问题讨论】：

selector2 不会匹配任何东西，因为它有两个 id 选择器并且一个元素应该只有一个 id。我认为您的意思是像在 selector1 中那样使用后代 css 选择器。

标签： css css-specificity

【解决方案1】：

在第一个选择器中，您将样式应用于锚标签，在第二个选择器中，您将样式应用于无序列表。

白色被应用到列表中，并且列表内没有应用自己的颜色的任何东西都将被涂成白色。

在这种情况下，显示第一个选择器的灰色是因为它直接应用于锚元素，而第二个选择器的灰色仅隐式应用于锚，允许灰色覆盖它。

【讨论】：