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< 的属性 相反。

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