CSS 特异性问题 - 为什么这个选择器优先？

Question

编辑:

在检查我的 css 之后，我意识到我的脑子里有一个巨大的洞，实际的问题是我没有在 bar 中定义 color 规则.css .footer-link:hover，很明显 foo.css a:hover 中的颜色规则被应用了。 CSS 101。谢天谢地，今天是星期五。我显然需要周末。感谢您的帮助!

我在为一个元素处理一些 UI 时看到了一些有趣的东西，我确信这与我缺乏对 CSS 特性的理解有关。我已经做了一些研究，但似乎仍然无法解决我自己的问题。

无论如何，我为包含在两个不同样式表中的 anchor 元素定义了几个样式。为简单起见，我将它们称为 foo.css 和 bar.css。 foo.css包含在bar.css

之前的页面中

在foo.css中有如下规则:

a {
    color: #0088cc;
    text-decoration: none;
}

a:hover {
    color: #0088cc;
}

在bar.css中有如下规则:

.footer-link {
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: rgb(150, 150, 150);
    font-size: 13px;
    line-height: 18px;
    margin-right: 6px;
}

.footer-link:hover {
    background-color: rgba(255, 191, 254, 0.8);
    text-decoration: none;
}

HTML 标记是:

<a href = "#" class = "footer-link">Cheese is really good</a>

似乎 hover 样式是从 foo.css 应用的，尽管据我所知，.footer-link:hover 具有更高的特异性。如我所料，正在应用正常的 anchor 样式。

所以我的问题是:

为什么在 foo.css 中应用悬停规则，即使 bar.css 稍后包含在页面中并且 .footer-link:hover 应该比 a:hover 具有更高的特异性？

提前致谢!

Example on jsFiddle

Answer 1

正在应用两种样式。 .footer-link:hover 比 a:hover 更具体是正确的，但是您看到的是两种样式定义的组合。这是级联样式表的级联部分。

首先应用您的 a 和 a:hover 样式，然后是更高特异性的 .footer-link 和 .footer- link:hover 样式随后应用，并且它们的任何显式定义的属性(例如 background)将覆盖以前的定义。

但是，由于您没有在 .footer-link:hover 样式中指定链接 color，它继承了 a:hover< 的属性 代替。

这里的特殊性完全按照预期的方式工作，您只是对继承和特殊性的工作方式有点困惑!