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

这可能很容易，因为我觉得我缺少一个基本点

情况：

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

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

在只有一个孩子之前，这一切都很好。在这种情况下，第二个声明将覆盖第一个声明，无法达到预期效果

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

拆分它：

.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;
}

---

使用

：独生子女
：

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

更新：瑜珈是对的。我忘了提。这应该出现在您的语句之后。
它们与原始代码一样有效。但是，您也应该包括带前缀的属性。再见，谢谢。第二个很好用。我会选择这个答案，因为它是第一个。我认为添加额外规则的第二个选项使它更清晰易读。我不确定这是否会覆盖
：first child
和
：last child
规则。因此，您应该确保此规则位于现有两个规则之后。