在 CSS 规则中重复类名会增加其优先级吗？

Question

假设我有一个<div>：

<li class="menu-item"> ... </li>

有人能告诉我是否可以li.menu-item.menu-item.menu-item { ... }用来使这个 css 规则具有更高的优先级吗？

更新：

下面是代码来说明这一点：

<ul>
    <li class="menu-item dark">Item 1</li>
    <li class="menu-item dark">Item 2</li>
    <li class="menu-item dark menu-item-special">Item 3</li>
    <li class="menu-item dark">Item 4</li>
</ul>

.menu-item.dark {
    background: #333;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
}
.menu-item-special.menu-item-special.menu-item-special {
    background: blue;
}

还有一个jsfiddle：http : //jsfiddle.net/wenjiehu/6hycnscy/

可以看到“Item 3”的背景色是蓝色。

Answer 1

这不是一个好习惯，因为你必须去规范来确认它，但有趣的是它会产生影响。

奇怪的是，在 CSS 声明上重复一个类会提高它的特异性！

我不相信，但如果你查阅 CSS 规范，没有什么可以阻止重复一个类来增加特异性：

• 如果声明来自“样式”属性而不是带有选择器的规则，则计数为 1，否则为 0 (= a)（在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，所以 a=1、b=0、c=0 和 d=0。）
• 计算选择器中 ID 属性的数量（= b）
• 计算选择器中其他属性和伪类的数量（= c）
• 计算选择器中元素名称和伪元素的数量（= d）

所以在你的例子中：

.menu-item.dark {} 
/* a=0 b=0 c=2 d=0 -> specificity = 0,0,2,0 */
li.menu-item-special.menu-item-special.menu-item-special
/* a=0 b=0 c=3 d=0 -> specificity = 0,0,3,1 */

所以后者实际上赢了！

要添加更多上下文，特殊性规则是分层的，因此下面#foo的规则优于您的规则，如下所示!important：

#foo
/* a=1 b=0 c=0 d=0 -> specificity = 0,1,0,0 */
li.menu-item-special.menu-item-special.menu-item-special
/* a=0 b=0 c=3 d=0 -> specificity = 0,0,3,1 */

注意：我只在 Chrome 和 IE8 上测试过。由于其未定义的性质，某些浏览器的行为可能有所不同。