Question

我正在制作当前页面（.active）的菜单列表，这是我的第一次尝试：

.menu li:hover,
.menu li:focus {
    border-bottom-color: #000;
}

.menu li.active {
    border-bottom: 10px solid #888;
}

（对于干净的页面，我把所有内容放在JS Bin上。）

但是，关于制表符的悬停效果并未显示为我想要的效果。所以我改变了下面这两个的顺序。

.menu li.active {
    border-bottom: 10px solid #888;
}

.menu li:hover,
.menu li:focus {
    border-bottom-color: #000;
}

同样在JS Bin

干杯！它现在按我的意愿工作。但问题出现在我的脑海里。

.menu li.active的特异性高比.menu li:hover高，基本上是20比11。但是为什么只有当.menu li.active在{{1}之前时才有效（上面的第二个代码区域）？

这是因为，对于代码区域1，我们首先指定了.menu li:hover的边框颜色，然后我们遇到.menu li:hover，并且在悬停时未指定它的边框颜色？

（不知道它是否清楚。它有点难以解释。）

Answer 1

类和伪类具有相同的特异性。 .menu li.active因此具有相同的权重＆＃39;为.menu li:hover。

公式，在CSS Specificity: Things You Should Know和CSS Tricks: Specifics on CSS Specificity上解释（等等）：

记住如何衡量特异性。 “从0开始，为样式添加1000 属性，为每个ID添加100，为每个属性，类或添加10 伪类，为每个元素名称或伪元素添加1。所以 body #content .data img:hover特异性值为122 （0,1,2,2或0122）：#content为100，.data为10，:hover为10，1 body为img为1。“

应用于您的CSS，它会为两个选择器提供21。如果权重相等，则订单很重要，并使用最后一条规则。

要使规则更具体，您可以.menu li.active使用默认＆＃39;样式，和.menu li.active:hover的悬停版本。后者比第一个更具体（31对21）并且将始终应用于悬停，而不管CSS文件中的顺序。

Answer 2

当存在特异性时，命令会有问题吗？

只有当特异性相等时才会发生。

.menu li.active的特异性高于.menu li：hover，基本上是20 vs 11

不，不是。

Classes and pseudo-classes have equal specificity。

所以两者都是021（没有id选择器，两个类或伪类选择器和一个类型选择器）。

Answer 3

您可以检查CSS rules，here的重量，两个规则的重量相同（均为0 0 2 1）

当存在特异性时，订单是否重要？

3 个答案: