Question

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

Answer 1

这是因为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

Answer 2

类型选择器（例如h1）和伪元素（例如::before）是订单中的第一个。

在他们之后你有类选择器（例如，.example），属性选择器（例如，[type="radio"]）

一些有用的链接https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

由于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

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

3 个答案: