假设我有一个<div>:

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

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

Update:

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

<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/ http://jsfiddle.net/wenjiehu/6hycnscy/

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

这不是一个好的做法，因为您必须查看规范来确认它，但有趣的是它会产生影响。

奇怪的是，在 CSS 声明上重复一个类会提高它的特异性！ http://www.w3.org/TR/CSS21/cascade.html#cascade

我不相信，但是如果你查阅 CSS 规范，就会发现没有什么排除重复一堂课以增加特异性：

• 如果声明来自“style”属性而不是带有选择器的规则，则计数 1，否则计数 0 (= a)（在 HTML 中，元素“style”属性的值是样式表规则。这些规则没有选择器，所以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 http://jsfiddle.net/bttybpyg/1/:

#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 上测试过。由于其未定义的性质，某些浏览器的行为可能有所不同。