了解链接伪类继承

时间:2014-03-20 16:36:12

标签: css css-selectors pseudo-class

我有一个简单的设置,其中包含:链接,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/

2 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:0)

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

#theDiv a:hover {color:red}