Менее специфичный стиль применяется браузером

<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.

Источник

1 ответ

В первом селекторе вы применяете стили к тегам привязки, во втором вы применяете стили к неупорядоченному списку.

Белый цвет применяется к списку, и все внутри этого списка , к которому не применен его собственный цвет, будет окрашено в белый цвет.

В этом случае серый цвет из первого селектора отображается, потому что он непосредственно применяется к элементам привязки, тогда как серый цвет из второго селектора применяется только неявно к якорям, что позволяет серому цвету переопределять его.

Источник
Другие вопросы по тегам