分享
三行代码  ›  专栏  ›  技术社区  ›  venabeo

如何一起使用:before和:nth子选择器 - How to use :before and :nth-child selectors together

css
  •  0
  • venabeo  · 技术社区  · 1 周前
      <ul class="points">
                <li>sdsds</li>
                <li>sdsds</li>
    </ul>
    

    我正在改变列表样式为字体可怕的图标,我希望每一个第二个列表项目是不同的颜色,因此我已经使用了第n个孩子(甚至),但它不是与之前的选择器一起工作。 .

    points li:before {
        content: "\f1b2"; 
        font-family: FontAwesome;
        display: inline-block;
        margin-left: -1.3em; 
        width: 1.3em; 
        color: #ba2b9f;
      }
      .points li:before:nth-child(even) {
        color: red !important;
      }
    
    1 回复  |  直到 1 周前
        1
  •  0
  •   disinfor    1 周前

    我在写一个答案,尽管我希望这个问题能结束:

    选择器的顺序不对。

    应该是什么:

    li:nth-child(even)::before
    

    这意味着 li 孩子,影响 before 伪。

    原文

    li:before:nth-child(even)
    

    这意味着:一个偶数元素 之前 粉刺。这永远行不通,因为只有一个 之前 (和) after 伪元素)。