2

编辑：

在查看了我的 css 之后，我意识到我的头上有一个大洞，而实际问题是一个简单的事实，即我没有在 中定义color规则，所以很明显正在应用bar.css .footer-link:hover颜色规则。foo.css a:hoverCSS 101。谢天谢地，今天是星期五。我显然需要周末。谢谢你的帮助！

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

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

所以我的问题是：

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

提前致谢！

jsFiddle 上的示例

4

3 回答 3

2

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

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

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

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

于 2013-07-26T18:04:44.157 回答
2

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

如果您不希望colorfroma:hover应用，您应该通过color: #0088cc再次设置 in来反转它.footer-link:hover。

于 2013-07-26T18:05:07.773 回答
1

选择器设置的属性不同，但都匹配，所以都应用了。如果在相关块中设置bar.css了color属性，它将覆盖 in 中的属性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)在目前的情况下。）

于 2013-07-26T18:05:12.950 回答