CSS селектор вопрос

Question

.menu a:hover {color: red;} 
.tab:hover {color:blue;}

<div class="menu">
    <a class="tab">Link</a> // will be red
</div>

Почему я должен использовать a.tab:hover для переопределения .menu a:hover? Почему просто .tab:hover не работает?

Answer 1

.menu a:hover является более конкретным , чем .tab:hover, поэтому он выглядит ниже в порядке каскада.

a.tab:hover так же специфичен, как и .menu a:hover, поэтому правила в этих двух наборах правил применяются в исходном порядке.

Answer 2

Ответ здесь сводится к тому, что называется «специфичность». Чтобы понять все об этом, взгляните на раздел Расчет специфичности селектора в спецификации селекторов CSS3 (в спецификации CSS2.1 есть похожие вещи).

С учетом системы base-10 (поскольку вы не превышаете счет 10 для любого уровня, на котором это безопасно сделать), .menu a:hover заканчивается со спецификацией 021, но .tab:hover получает специфичность 020, что ниже, поэтому, если в обоих правилах определено правило, .menu a:hover выиграет.

Если бы вы использовали a.tab:hover, его специфичность была бы 021, что равняется .menu a:hover, и поэтому оно равняется порядку, в котором они указаны, который применяется.

Answer 3

класс .tab должен следовать за объектом, на который он влияет, в данном случае a, и должен сопровождаться псевдоклассом (или действием), которым вы хотите его активировать, в данном случае :hover

Следовательно, a.tab:hover работает, а .tab:hover не