所以,我偶然发现了一个奇怪的CSS行为试图覆盖nth-child
考虑以下示例
li:nth-child(2n+1){
color: red;
font-weight:normal;
}
.hmm{
color:green;
font-weight:bold;
}
<ul>
<li class="hmm">HMM</li>
<li>test</li>
<li class="hmm">HMM</li>
<li class="hmm">HMM</li>
<li>test</li>
</ul>
问题是,为什么.hmm{...}
声明不会覆盖li:nth-child
声明?
即,为什么所有的HMM都不会变成大胆的绿色?我错过了什么或做错了什么?
答案 0 :(得分:7)
这是因为Specificity。像更一般的规则将被更具体的规则所覆盖。 https://HTTP_HOST
比li:nth-child
更具体。因此,只需添加.hmm
.hmm
的特异性
li.hmm
li:nth-child(2n+1){
color: red;
font-weight:normal;
}
li.hmm{
color:green;
font-weight:bold;
}
<强>更新强>
重要性顺序,最高1到最低4。
<ul>
<li class="hmm">HMM</li>
<li>test</li>
<li class="hmm">HMM</li>
<li class="hmm">HMM</li>
<li>test</li>
</ul>
:此处应用的样式是最重要的。<div style='...'></div>
:因为id
在页面中应该是唯一的。id
:可以有多个类,因此它们的重要性低于class
。 id
和pseudo-classes
也来到这里。attributes
:至少。示例:
element
&gt; <li style='...'></li>
&gt; #thatListElement
&gt; li.myClass
&gt; .myClass
答案 1 :(得分:1)
类型选择器(例如h1
)和伪元素(例如::before
)是订单中的第一个。
在他们之后你有类选择器(例如,.example
),属性选择器(例如,[type="radio"]
)
一些有用的链接https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
答案 2 :(得分:0)
由于CSS规则具有特异性。表示优先规则。元素和类具有不同的特异性。元素和伪元素具有更高的优先级,因此其css规则优先于类。我的解决方案是
<style>
li:nth-child(2n + 1){
font-weight:normal;
color : red;
}
li.hmm{
color:green !important ;
font-weight:bold !important;
}
</style>
<ul>
<li class="hmm">HMM</li>
<li>test</li>
<li class="hmm">HMM</li>
<li class="hmm">HMM</li>
<li>test</li>
</ul>
您可以在此处阅读有关特异性的信息 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity