Question

修改的

在审核了我的CSS之后，我意识到我脑子里有一个巨大的洞，实际问题是我没有在color {{bar.css {.footer-link:hover {{}}中定义foo.css规则的简单事实1}}，显然正在应用a:hover foo.css的颜色规则。 CSS 101.谢天谢地，这是星期五。我显然需要周末。谢谢你的帮助！

我正在为一个项目的某个UI工作时看到一些有趣的东西，我确信这与我对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; }中，有以下规则：

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

HTML标记是：

hover

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

所以我的问题是：

为什么悬停规则会在bar.css中应用，即使.footer-link:hover后面会包含a:hover，{{1}}的特异性应该高于{{1}}？

提前致谢！

Example on jsFiddle

Answer 1

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

首先应用a和a:hover样式，然后应用更高的特异性.footer-link和.footer-link:hover样式，以及任何明确定义的属性（例如background）覆盖以前的定义。

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

这里的特异性完全符合它的预期，你对遗传和特异性的工作方式有点困惑！

Answer 2

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

如果您不希望color来自a:hover，则应通过在color: #0088cc中再次设置.footer-link:hover来撤消该操作。

Answer 3

选择器设置的属性不同，但两者都匹配，因此两者都应用。如果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)。）

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

3 个答案: