:first-child 和 :last-child 同时答案

【问题标题】：:first-child and :last-child simultaneously:first-child 和 :last-child 同时
【发布时间】：2013-03-03 05:28:32
【问题描述】：

这可能很容易，因为我觉得我在这里遗漏了一个基本点。

情况：

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

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

在只有一个孩子之前工作得很好。在这种情况下，第二个声明将覆盖第一个声明，并且不会达到预期的效果。

解决这个问题的最简短和优雅的方法是什么？

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

使用:only-child:

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

更新：Yogu 是对的。我忘了提。这应该在您的陈述之后。

【讨论】：