選擇最後一個孩子，除非它也是第一個孩子

Question

我已經建立了我的UL的最後一個LI標籤的規則：

.className li:last-child { 
    stuff: here; 
} 

我是否能夠設置在說CSS規則「應用此樣式到最後的LI標籤，除了last-child也是first-child「，即在OL中只有一個LI標籤。

Answer 1

可以連同:not()使用選擇。

CSS僞類:not(X)是一個函數表示法服用簡單的選擇X作爲參數。它匹配不是由參數表示的元素。

li:last-child:not(:first-child) { 
 
    color: red; 
 
}

<ul> 
 
    <li>item a</li> 
 
    <li>item b</li> 
 
    <li>item c</li> 
 
</ul> 
 

 
<ul> 
 
    <li>only item</li> 
 
</ul>

Answer 2

有一個:only-child選擇：

https://css-tricks.com/almanac/selectors/o/only-child/

除了一個:only-of-type選擇

https://css-tricks.com/almanac/selectors/o/only-of-type/

你可以使用這些覆蓋任何東西:last-child選擇正在修改。

Answer 3

你可以留下你的CSS，因爲它是和補充，覆蓋它的規則，如果它是第一個孩子：

/* What should happen in the last child */ 
.className li:last-child { 
    stuff: here; 
} 

/* If there is only one child the previous one will be overwritten by this one */ 
.className li:first-child { 
    /* default values */ 
} 

或者，你可以使用一些更先進：

/* Select the last child if it is not the first child */ 
li:last-child:not(:first-child) { 
    stuff: here; 
} 

我會使用第二個，但這取決於你對CSS的熟悉程度。

更多分析：

• :last-child - 選擇最後一個子
• :not() - 如果不是
• :first-child - 第一個子

Answer 4

您可以像li:last-child一種化合物選擇之前預先準備* +以防止它選擇的第一個孩子：

.className > * + li:last-child { 
 
    color: red; 
 
}

<ul class="className"> 
 
    <li>item a</li> 
 
    <li>item b</li> 
 
    <li>item c</li> 
 
</ul> 
 
<ul class="className"> 
 
    <li>only item</li> 
 
</ul>