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

Question

我在这里对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式，由于某种原因，当我使用 Chrome 开发工具或 Firebug 检查页面时，其中一个随机样式会被其他样式覆盖。在摆弄 !important 案例并意识到它们正在慢慢使我的代码变得非常糟糕之后，我将它们全部删除并试图弄清楚如何组织我的链接样式以在正确的位置获得所有正确的样式而不会出现它们覆盖。

基本上我是这样的:

.newlinks a {
some styling}

.dl a {
some styling}

.abclink a {
some styling}

.newlinks 从“.abclink a”获得“一些样式”。我真的很困惑为什么如果类(class)有一个特定的名字而不是像“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 获取样式 :(

Answer 1

underrighttext 的样式像 dl 的原因是您为 dl 声明 CSS 的方式:

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

我从您的 JSFiddle 复制粘贴的这个选择器将应用于 dl 中的所有 a，也将应用于所有 a:active 和 a:visited。不仅仅是 dl 中的 a:active!

您需要将事件和访问状态的选择器固定为如下所示:

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

现在，您的事件链接和访问过的链接的样式只是浏览器最后解析的样​​式。

我已经更新了你的 jsfiddle使用正确的 CSS 选择器。它现在应该可以正常工作了。