了解链接伪类继承

Question

我有一个简单的设置，其中包含：链接，a：访问a：hover和a：active all在我的样式表顶部定义。我也有一个div，我已经为它内部的锚点定义了一个：链接颜色。当我这样做时，这些链接不会继承剩余的用于悬停和活动的伪类....直到我点击该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/

Answer 1

#theDiv a:link的{​​{3}}比所有其他选择器高specificity，并覆盖它们，直到该链接不再与:link选择器匹配，此时它与:visited匹配选择器。

Answer 2

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

#theDiv a:hover {color:red}