是否可以选择第n个孩子（x），但只有当它不是最后一个孩子？

Question

我想选择ul内的第三个元素，但前提条件不是ul中的最后一个元素。

样品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。

Answer 1

你可以使用：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>

Answer 2

可以使用:last-child选择。因此，这将是这样的：在这里

ul >li:last-child { 
    /* Your CSS */ 
} 

More about :last-child

Answer 3

经典的CSS的方法，不使用:not（有时可能会非常棘手），是先给的一般规则，然后用其覆盖特例。

ul > li:nth-child(3) { color: red; } 
ul > li:last-child { color: inherit; } 

我想一个CSS选择器，

如果这是很重要的，你需要使用:not。

Answer 4

ul > li:nth-child(3):not(:last-child), ul > li:nth-child(2):not(:last-child) { 
    color: red; 
}