html - 无法覆盖第 nth-child 中设置的样式

<分区>

所以，我偶然发现了一个奇怪的 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 都变成粗体绿色？我错过了什么或做错了什么？

最佳答案

这是因为 Specificity .就像更一般的规则将被更具体的规则覆盖。 li:nth-child比 .hmm 更具体.所以只需增加 .hmm 的特异性通过添加 li.hmm

li:nth-child(2n+1){
  color: red;
  font-weight:normal;
}

li.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>

更新:

重要性顺序，从最高 1 到最低 4。

例子:

<li style='...'></li> > #thatListElement > li.myClass > .myClass > li

关于html - 无法覆盖第 nth-child 中设置的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49494114/

相关文章：

javascript - 如何填充新的 Windows 表单元素