nth-子类跳过特定类减去
nth-子类跳过特定类减去
提问于 2015-06-18 20:32:52
我需要选择一个类的第n个子类，不计算特定类的元素。例如：
李
李class="skip_this“
李
李
李
我想让第n个子类在计数时跳过skip_this类，这意味着如果我想要第3 li不是skip_this，它实际上会选择第4 li，因为它不会计算带有skip_this的那个。
回答 2
Stack Overflow用户
发布于 2015-06-18 20:34:56
使用*不()类
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_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)的nth-child。
Stack Overflow用户
发布于 2015-06-19 09:24:00
使用预处理器，可以创建一个“函数”，它可以生成奇怪且臃肿的选择器列表(用于元素的非无限计数)，从而有效地执行:nth-child跳过指定项的操作。但是由此产生的CSS会变得非常臃肿(基本上它只是“计数”)
li:not(.skip)
~ li:not(.skip)
~ li:not(.skip)
~ li:not(.skip)
...
~ li:not(.skip) {})，所以我不认为这实际上是一个实际的解决方案。
Codepen演示
演示中的代码一次生成整个列表(我认为这样更容易理解)，但是同样的方法可以用来生成单个的“跳过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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30925289
复制相关文章
相似问题
腾讯云开发者
