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,因此这两个规则集中的规则按源顺序应用.