这个页面需要点击或者刷新一次,这样显示这个链接已访问
a:visited { /* 权重 [0,1,1] */
color: #00f;
background-color: #ff0;
}
权重为 [0,1,1]
<p><a class="cl1" href="...">...</a></p>
p a.cl1 { /* specificity [0,1,2] */
color: #f00;
background-color: #0ff;
}
红色字,浅绿色背景,权重为 [0,1,2],比头一条权重高.
但是IE6中权重为 [0,1,1] 的第一条规则仍然生效, 它没有被权重为 [0,1,2]的第二条规则覆盖 (但是没有定义:visited伪类)
<p class="cl2"><a class="cl3" href="...">...</a></p>
.cl2 a.cl3 { /* specificity [0,2,1] */
color: #f00;
background-color: #0ff;
}
红色字,浅绿色背景,权重为 [0,2,1], 比第一条权重为[0,1,1]的规则高
现在在IE6中第一条规则会被覆盖
<div><p><a href="...">...</a></p></div>
div p :visited { /* specificity [0,1,2] */
color: #f00;
background-color: #0ff;
}
T第一条规则被覆盖了, 在IE6中也是这样. 这条规则的权重和第二条一样都是 [0,1,2] 仅仅比第二条多了对伪类:visited的定义,就能覆盖第一条规则
推荐阅读: IE6-/Win: 关于伪类:hover的权重问题, 或者是 其他权重问题
翻译自:IE6-/Win: specificity problems with :visited pseudo-class