如何在CSS Grid的section标签中一次性设置所有子元素border-radius？

嘿，这个问题很好解决，核心就是用CSS选择器精准选中section容器内的所有Grid项目，不用逐个单独写样式。下面给你几种实用的方案：

1. 精准选中section的直接Grid子项（推荐） #

如果你的Grid布局里，section的直接子元素就是那些需要加圆角的块，用子选择器（>）可以精准命中，不会影响嵌套在块内部的其他元素：

<!-- 示例HTML结构 -->
<section class="grid-layout">
  <div>块1</div>
  <div>块2</div>
  <div>块3</div>
</section>

/* 一次性设置所有直接子项的圆角 */
.grid-layout > * {
  border-radius: 5px;
}

2. 选中section内所有层级的块（通用场景） #

如果section里的块有嵌套，你希望所有层级的块都应用圆角，用后代选择器（空格分隔）：

.grid-layout * {
  border-radius: 5px;
}

不过要注意，这个会选中section里所有的子元素，包括嵌套的文本容器、小按钮等，按需使用。

3. 针对带类名的Grid项目（更清晰可维护） #

如果你的Grid项目都有统一的类名（比如.grid-item），直接通过类名选择会更直观，也方便后续扩展样式：

<section class="grid-layout">
  <div class="grid-item">块1</div>
  <div class="grid-item">块2</div>
  <div class="grid-item">块3</div>
</section>

.grid-layout .grid-item {
  border-radius: 5px;
}

补充说明 #

之前需要逐个设置的原因是：直接给section元素加border-radius只会作用在section容器本身，而不会自动传递给它的子元素。通过上述选择器，我们明确告诉CSS要把样式应用到section内部的目标元素上，就能实现“写一次，全生效”的效果啦。

内容的提问来源于stack exchange，提问作者Arie B