Question

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

利
li class =＆＃34; skip_this＆＃34;
李
李
利

我想让nth-child在计数时跳过skip_this类，这意味着如果我想要第3个li不是skip_this，它实际上会选择第4个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>

<强>更新

我的意图是，如果我想选择不是'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>

<强> UDPATE

为清楚起见，尝试使用条件（类）定位一组元素而不管某些兄弟姐妹是不行的，因为nth-child和nth-of-type将定位所有兄弟姐妹或同类型的兄弟姐妹。

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

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

Answer 2

好吧，使用预处理器，可以制作一个＆＃34;功能＆＃34;这可以生成奇怪且膨胀的选择器列表（对于非无限数量的元素），其有效行为类似:nth-child跳过指定的项目。但是由此产生的CSS真的会非常臃肿（基本上它只是＆＃34;计算＆＃34;

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

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

Codepen demo

演示中的代码会立即生成整个列表（我认为通过这种方式可以更容易理解），但是可以使用相同的方法生成单个＆＃34;跳过nth＆＃34;项目

＆＃13;

/*
    "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();

＆＃13;

@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);
            }
        }
    }
}

＆＃13;

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

＆＃13;

n-child跳过特定班级少

2 个答案: