html - 如何将边框半径添加到 css 网格元素

Question

https://codepen.io/siddagra/pen/vYBoJyM 我想为五个紫色+灰色框的每一个添加边框半径，理想情况下不添加任何 html 样式，因为框本身内的 div 元素的排列可能会发生变化。请帮忙，我试过了:第一个 child 和第二个 child 选择器，但那没有用。

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

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

Answer 1

试试这个:

.ExpandedSetPiece div:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.ExpandedSetPiece div:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

“ child ”一词可能有点误导。如果您在 .ExpandedSetPiece 上使用 :first-child，则表示这些组中的第一个。