gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:46:49 24 4
gpt4 key购买 nike

假设我有一个 <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”的背景色是蓝色。

最佳答案

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

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

我不相信,但如果你查阅 CSS 规范,没有什么可以排除重复一个类来增加特异性:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= 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 上测试过这个。由于其未定义的性质,某些浏览器可能会采取不同的行为。

关于css - 在 CSS 规则中重复类名会增加其优先级吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29112807/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com