：第一個孩子和：最後一個孩子同時

Question

這可能很容易，因爲我有一種感覺，我在這裏錯過了一個基本觀點。

現狀：

.singleOrder:first-child { 
    border-radius: 5px 0 0 0; 
} 

.singleOrder:last-child { 
    border-radius: 0 5px 0 0; 
} 

的作品真的很好，直到只有一個孩子。在這種情況下，第二個聲明將覆蓋第一個聲明並且不能達到預期的效果。

什麼是解決這個問題的最簡短最優雅的方法？

Answer 1

拆分它：

.singleOrder:first-child { 
    border-top-left-radius: 5px; 
} 

.singleOrder:last-child { 
    border-bottom-left-radius: 5px; 
} 

或編寫額外的規則：

.singleOrder:first-child:last-child { 
    border-radius: 5px 5px 0 0; 
} 

Answer 2

使用:only-child：

.singleOrder:only-child { 
    border-radius: 5px 5px 0 0; 
} 

更新：Yogu是正確的。我忘了提及。這應該在你的陳述之後。