Question

<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;
}

VS

选择器2：

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

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

Answer 1

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

白色应用于列表，列表中未应用自己的颜色的任何内容都将显示为白色。

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

浏览器应用的特定样式

1 个答案: