这可能很容易,因为我觉得我在这里遗漏了一个基本点。
情况:
.singleOrder:first-child {
border-radius: 5px 0 0 0;
}
.singleOrder:last-child {
border-radius: 0 5px 0 0;
}
在只有一个孩子之前工作得很好。在这种情况下,第二个声明将覆盖第一个声明,并且不会达到预期的效果。
解决这个问题的最简短和优雅的方法是什么?
这可能很容易,因为我觉得我在这里遗漏了一个基本点。
情况:
.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;
}
使用:only-child
:
.singleOrder:only-child {
border-radius: 5px 5px 0 0;
}
更新:Yogu 是对的。我忘了提。这应该在你的陈述之后。