是否可以选择第n个孩子(x),但只有当它不是最后一个孩子?
我想选择ul
内的第三个元素,但前提条件不是ul
中的最后一个元素。是否可以选择第n个孩子(x),但只有当它不是最后一个孩子?
样品1:
<ul>
<li>Home</li>
<li>Cat 1</li>
<li>Subcat 1</li>
<li>Product</li>
</ul>
样品2:
<ul>
<li>Home</li>
<li>Cat 1</li>
<li>Product</li>
</ul>
我想一个CSS选择器,其中对于样品1,选择li
用 “SUBCAT 1”,而对于样品2 ,不选择任何东西。
ul > li:nth-child(3)
将适用于样本1,但也会匹配样本2中的'Product'li,我不希望它做。
在这种情况下,我无法修改HTML。
你可以使用:nth-child:不是为了实现你所需要的。这里是一个例子。
ul li:nth-child(3):not(:last-child) {
color: red;
}
<ul class="sample1">
<li>Home</li>
<li>Cat 1</li>
<li>Subcat 1</li>
<li>Product</li>
</ul>
<ul class="sample2">
<li>Home</li>
<li>Cat 1</li>
<li>Product</li>
</ul>
但是他想要选择第二个孩子,如果它不是**最后一个孩子。 – 2016-11-13 05:27:57
经典的CSS的方法,不使用:not
(有时可能会非常棘手),是先给的一般规则,然后用其覆盖特例。
ul > li:nth-child(3) { color: red; }
ul > li:last-child { color: inherit; }
我想一个CSS选择器,
如果这是很重要的,你需要使用:not
。
只是迂腐,你可以避免不使用第n个最后孩子(n + 1)... – vals
ul > li:nth-child(3):not(:last-child), ul > li:nth-child(2):not(:last-child) {
color: red;
}
这是一种享受。谢谢。 – Baraka