第 n 个孩子跳过特定班级更少

Question

我需要选择一个类的第n个子级，而不是计算特定类的元素。举个例子，给出：

李
李类="skip_this"
李
李
李

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

Answer 1

使用 ：not（） like

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>

更新

我的目的是，如果我想选择第二个不是"skip_class"的孩子，它会选择第三个孩子，因为第二个孩子是"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>

乌德帕特

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

。

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

请参阅我可以将 ：nth-child（） 或 ：nth-of-type（） 与任意选择器组合吗？

Answer 2

好吧，使用预处理器可以制作一个"函数"，该函数可以生成奇怪且膨胀的选择器列表（对于非无限数量的元素），其行为实际上就像:nth-child跳过指定项目一样。但是由此产生的CSS会非常臃肿（基本上它只是"计数"

li:not(.skip) 
    ~ li:not(.skip) 
        ~ li:not(.skip) 
            ~ li:not(.skip)
                ...
                    ~ li:not(.skip) {}

选择器链），所以我认为这实际上不是一个实用的解决方案。

代码笔演示

演示中的代码一次生成整个列表（我认为这样更容易理解），但相同的方法可用于生成单个"跳过第 n 个"项。

/*
    "Please hack me to support Less" kernel. 
    
    Created by @aaronlayton
    Modified by meri
    Updated by max
*/
// Step 1: Select the style element and change it to text/less
$('head style').attr('type', 'text/less');
// Step 2: Set development mode to see errors
less.env = 'development';
// Step 3: Tell Less to refresh the styles
less.refreshStyles();

@colors:
    #E74C3C
    #C0392B
    // #E67E22
    // #D35400
    #F1C40F
    #F39C12
    #2ECC71
    #27AE60
    // #1ABC9C
    // #16A085
    #3498DB
    #2980B9
    #9B59B6
    #8E44AD
    #34495E
    #2C3E50;
.make-rainbow(@colors, skipme);
li {
    padding: .5em;
    width:    2em;
    &:after {margin-left: 2em}
}
// ..................................
// impl:
.make-rainbow(@colors, @skip-class) {
    @next: ~;
    @n: length(@colors);
    .-; .-(@i: 1) {
        li:not(.@{skip-class}) {
            background-color: extract(@colors, @i);
            &:after {content: "@{i}"};
            @{next} when (@i < @n) {
                .-(@i + 1);
            }
        }
    }
}

<ul>
    <li>test</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li>test</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>