如何给CSS网格元素添加边框半径

Question

https://codepen.io/siddagra/pen/vYBoJyM 我想为五个紫色+灰色盒子中的每一个添加边框半径，理想情况下不添加任何 html 样式，因为盒子本身内的 div 元素的排列可能会受到影响改变。请帮忙，我尝试过：第一个孩子和第二个孩子选择器，但这不起作用。

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

“孩子”这个词可能有点误导。如果使用:first-childon.ExpandedSetPiece则意味着这些组中的第一个。