理解链接伪类继承答案

【问题标题】：Understanding link pseudo class inheritence理解链接伪类继承
【发布时间】：2014-04-27 16:21:50
【问题描述】：

我有一个简单的设置，其中 a:link、a:visited a:hover 和 a:active 都在我的样式表顶部定义。我还有一个 div，我在其中为其中的锚定义了 a:link 颜色。当我这样做时，这些链接不会继承剩余的悬停和活动伪类....直到我单击该 div 的链接并且它已被“访问”，此时伪类开始工作。这是为什么呢？

CSS...

a:link {
    color: blue;
}

a:visited {
    color: purple
}

a:hover {
    color: red;
}

a:active {
    color: pink;
}

#theDiv a:link {
    color: green;
}

HTML...

<a href="#33">The First Link</a>
<div id="theDiv">
    <a href="#33">The Second Link</a>
</div>

http://jsfiddle.net/ZKztj/7/

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

#theDiv a:link 的 specificity 比所有其他选择器都高，并且会覆盖它们，直到链接不再匹配 :link 选择器，此时它匹配 :visited 选择器。

【讨论】：

我明白了。我一直认为锚伪类在继承方面是相互独立的。您的回答帮助我意识到，锚点宁可根据其状态假设继承，主要是 :link 和 :visited — 这是否正确？

【解决方案2】：

所有浏览器都为锚元素设置了默认样式。您需要一个更具体的选择器来覆盖：

#theDiv a:hover {color:red}

【讨论】：