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

【问题标题】：CSS Specificity Issue - Why is this selector taking priority?CSS 特殊性问题 - 为什么这个选择器优先？
【发布时间】：2013-07-27 02:40:56
【问题描述】：

编辑：

在查看了我的 css 之后，我意识到我的脑袋里有个大洞，而实际的问题是我没有在 bar.css .footer-link:hover 中定义 color 规则，所以很清楚正在应用来自 foo.css a:hover 的颜色规则。 CSS 101。谢天谢地，今天是星期五。我显然需要周末。感谢您的帮助！

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

无论如何，我为包含在两个不同样式表中的锚元素定义了几种样式。为简单起见，我将它们称为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 具有更高的特异性。正如我所料，正常的锚样式正在被应用。

所以我的问题是：

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

提前致谢！

Example on jsFiddle

【问题讨论】：

您的 jsFiddle 的工作方式与我在 Firefox 中所期望的一样，粉红色背景和蓝色文本悬停。 CSS 样式的定义顺序仅在它们具有相同的“分数”时才相关，在这种情况下，最后获胜。在您的情况下，.footer-link:hover 的得分高于 a:hover，因此您编写它们的顺序无关紧要。
从您提供的 jsfiddle 中，bar.css 在 foo.css 上工作
在 chrome 中也可以正常工作。
css-tricks.com/specifics-on-css-specificity

标签： css css-selectors css-specificity

【解决方案1】：

多个规则集适用于一个元素是可能且正常的。首先a:hover 应用color，然后.footer-link:hover 应用background-color 和text-decoration。如果他们的风格有冲突，那么.footer-link:hover 的风格会胜出——但没有风格冲突。所以这两个规则集中的样式只是结合在一起。

如果您不想应用来自a:hover 的color，则应通过在.footer-link:hover 中再次设置color: #0088cc 来反转它。

【讨论】：

【解决方案2】：

选择器设置的属性不同，但都匹配，所以都应用了。如果bar.css 在相关块中设置了color 属性，它将覆盖foo.css 中的属性，因为类选择器.footer-link:hover（优先级0,0,2,0）比元素更具体选择器a:hover（优先级 0,0,1,1）。这也是你必须在这里做的：在bar.css，将后面的块更改为

.footer-link:hover {

    /* the new line */
    color: <whatever should be the color of .footer-link when hovering>

    background-color: rgba(255, 191, 254, 0.8);
    text-decoration: none;
}

（我相信你现在想要rgb(150, 150, 150)。）

【讨论】：

【解决方案3】：

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

首先应用您的a 和a:hover 样式，然后应用更高特异性的.footer-link 和.footer-link:hover 样式，并且它们的任何显式定义的属性（例如background）都会覆盖之前的定义.

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

这里的特异性完全按照它应该的方式工作，您只是对继承和特异性的工作方式有点困惑！

【讨论】：