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

时间:2018-03-26 14:39:15

标签: html css

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

3 个答案:

答案 0 :(得分:7)

这是因为Specificity。像更一般的规则将被更具体的规则所覆盖。 https://HTTP_HOSTli: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。

  1. <ul> <li class="hmm">HMM</li> <li>test</li> <li class="hmm">HMM</li> <li class="hmm">HMM</li> <li>test</li> </ul>:此处应用的样式是最重要的。
  2. <div style='...'></div>:因为id在页面中应该是唯一的。
  3. id:可以有多个类,因此它们的重要性低于classidpseudo-classes也来到这里。
  4. attributes:至少。
  5. 示例:

    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