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 more specific比.tab:hover更高，所以它在级联顺序下方显得更低。

a.tab:hover与.menu a:hover一样具体，因此这两个规则集中的规则按源顺序应用。

Answer 2

这里的答案归结为所谓的“特异性”。要了解所有相关内容，请查看CSS3选择器规范中的Calculating a selector's specificity部分（CSS2.1规范中有类似内容）。

考虑到一个基数为10的系统（因为你没有达到任何级别的10级以上是安全的），.menu a:hover最终的特异性为021，但是.tab:hover获得020的特异性，这是更低的，因此在两者都定义规则的情况下，.menu a:hover将获胜。

如果你使用a.tab:hover，它的特异性将是021，等于.menu a:hover，因此它等于它们被指定的顺序。

Answer 3

类.tab必须遵循它正在影响的对象，在本例中为a，并且必须后跟您希望它被激活的伪类（或动作），在这种情况下{ {1}}

因此，:hover有效，a.tab:hover不