在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/

你可以看到＆＃34;项目3＆＃34;的背景​​颜色。是蓝色的。

Answer 1

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

Oddly enough repeating a class on a CSS declaration will boost its specificity!

我不相信它，但是如果你参考CSS规范，那么排除重复一个类以增加特异性是没有的：

  

  
• 如果声明来自的是＆＃39;样式＆＃39;属性而不是带选择器的规则，否则为0（= a）（在HTML中，元素的值＆＃34;样式和＃34;属性是样式表规则。这些规则没有选择器，所以a = 1，b = 0，c = 0，d = 0.）
  
• 计算选择器（= b）
中的ID属性数   
• 计算选择器（= 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 */

所以后者真的赢了！

---

要添加更多上下文，特异性规则是分层的，so below #foo beats your rule, as does !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上对此进行了测试。由于其未定义的性质，一些浏览器可能采取不同的行为

Answer 2

不，那不行。如果您想要具体，那么将所有容器ID，类和/或标签添加到css选择器。

#parent .wrapping-div ul li.menu-item{ color: red; }