Css特异性 - 样式表中链接样式的问题

时间:2013-06-16 05:17:35

标签: css css-specificity

我的样式表让我感到非常困惑。我的工作表中有很多特定的链接样式,由于某些原因,当我使用Chrome Dev Tools或Firebug检查页面时,其中一个会被其他东西覆盖。在摆弄了!重要案例并意识到他们正在慢慢地让我的代码变得非常可怕之后,我已经将它们全部删除了,并试图弄清楚如何组织我的链接样式以在正确的位置获得所有正确的样式而不是它们重写的。

基本上我喜欢这样:

.newlinks a {
some styling}

.dl a {
some styling}

.abclink a {
some styling}

而.newlinks正在从“.abclink a”获得“一些造型”。如果班级有一个特定的名字而不仅仅是“p”或其他什么,我真的很困惑。任何解释都会有所帮助!谢谢!

编辑:这是html的顺序

<div class="newlinks"><a href="#"></a></div>
more of the page..
<div class="abclink"><a href="#"></a></div>
<div class="dl"><a href="#"></a></div>

如果有必要,我可以发布更长的代码,我只是认为这可能是我的订购或措辞或其他问题的一般问题。

editedit:这里是jfiddle中相关的css / html

http://jsfiddle.net/Ub6er/

正如你在jsfiddle中看到的那样,“underrighttext”中的链接是从.dl获得样式:(

1 个答案:

答案 0 :(得分:3)

underrighttext的样式设置dl的原因是因为您已为dl声明了CSS:

.dl a, a:active, a:visited {
    ...
}

我从你的JSFiddle复制粘贴的这个选择器将适用于a中的所有dl,还适用于所有 a:active和{{ 1}}。不只是a:visited内的a:active

您需要修改活动状态和访问状态的选择器,如下所示:

dl

现在,您的活动链接和访问过的链接只是使用浏览器解析的最后一种样式进行样式设置。

我已使用正确的CSS选择器更新了jsfiddle。它现在应该按照你的预期工作。