：第一个孩子和：最后一个孩子同时

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是正确的。我忘了提及。这应该在你的陈述之后。