css - 第 n 个 child 跳过特定类(class)较少

Question

我需要在 less 中选择一个类的第 n 个子元素，而不是计算特定类的元素。例如，给定:

李
li class="skip_this"
李
李
李

我想让第 n 个 child 在计数时跳过 skip_this 类，这意味着如果我想要不是 skip_this 的第 3 个 li，它实际上会选择第 4 个 li，因为它不会计算带有 skip_this 的那个。

Answer 1

像使用:not()

li:nth-child(2n):not(.skip_class){

}

li:nth-child(2n):not(.skip_class){
    background:green;
    }

<ul>
 
   <li>test</li>
   <li class="skip_class">test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
  </ul>

更新

My intention is that if I wanted to select the 2nd child that is not 'skip_class', it would select the third child, since the 2nd child is a 'skip_class'

像+这样使用直接兄弟选择器

li:nth-child(2n):not(.skip_class), .skip_class + :not(.skip_class)

li:nth-child(2n):not(.skip_class),
.skip_class +:not(.skip_class) {
  background: green;
}

<ul>

  <li>test</li>
  <li class="skip_class">test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

更新

为了清楚起见，尝试以条件(类)为一组元素而不考虑某些 sibling 是行不通的，因为 nth-child 和 nth-of-type 将针对所有 sibling 或相同类型的 sibling 。

当您添加一个条件(:not(.skip_class))时，它会独立另一个选择器(nth-child) )

参见 Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?