当存在特异性时，顺序会很重要吗？

Question

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

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

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

（这里为了干净的页面，我都放在了JS Bin上。）

但是tab的悬停效果不是我想要的。所以我改变了两者的顺序如下。

.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 vs 11。但是为什么它只在.menu li.active时有效在 .menu li:hover 之前（上面的第二个代码区域）？

是不是因为代码区1，我们先指定了.menu li:hover的边框颜色，然后遇到了.menu li.active，悬停时没有指定边框颜色？

（不知道说清楚了没有，有点不好解释。）

Answer 1

类和伪类具有相同的特异性。 .menu li.active 因此与 .menu li:hover.

具有相同的 'weight'

公式，CSS Specificity: Things You Should Know and CSS Tricks: Specifics on CSS Specificity 上的解释（以及其他）：

Memorize how to measure specificity. “Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in body #content .data img:hover the specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.”

应用于您的 CSS，它将为两个选择器提供 21。在权重相等的情况下，顺序很重要，使用最后一个规则。

为了使规则更具体，您可以为 'default' 样式设置 .menu li.active，为悬停版本设置 .menu li.active:hover。后者比第一个更具体（31 对 21），并且将始终应用于悬停，无论 CSS 文件中的顺序如何。

Answer 2

Will order matters when there's specificity exists?

仅当特异性相等时。

The specificity of .menu li.active is higher than the .menu li:hover, basically 20 vs 11

不，不是。

Classes and pseudo-classes have equal specificity。

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

Answer 3

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

当存在特异性时，顺序会很重要吗？

Will order matters when there's specificity exists?

css

hover

css-specificity