是否可以選擇第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; 
}