如何无需JavaScript隐藏ANTD复选框组中的目标嵌套span？

先明确AntD复选框的DOM结构 #

AntD的Checkbox.Group渲染后，每个复选框的结构大概是这样的：

<div class="ant-checkbox-group">
  <label class="ant-checkbox-wrapper">
    <span class="ant-checkbox"> <!-- 复选框图标容器 --> </span>
    <span>标签文本</span> <!-- 你要隐藏的目标span -->
  </label>
  <!-- 更多复选框项 -->
</div>

针对不同需求的CSS写法 #

• 隐藏所有复选框的标签：直接选中每个复选框容器内的最后一个span（也就是标签文本）

.ant-checkbox-wrapper > span:last-child {
  display: none;
}

• 只隐藏最后一个复选框的标签：先定位到组内最后一个复选框容器，再选中它里面的标签span

.ant-checkbox-group .ant-checkbox-wrapper:last-child > span:last-child {
  display: none;
}

• 自定义类名增强精准性：如果你的复选框组加了自定义类（比如custom-checkbox-group），可以缩小选择范围避免影响其他组件

.custom-checkbox-group .ant-checkbox-wrapper:last-child > span:last-child {
  display: none;
}

为什么你之前的选择器没生效？ #

你尝试的last-of-type/last-child没精准定位，大概率是层级没选对：比如直接写.ant-checkbox-group span:last-child，会选中整个组里的最后一个span，而不是目标复选框容器内的标签span。必须先定位到对应的.ant-checkbox-wrapper，再深入选择内部的标签元素。

内容的提问来源于stack exchange，提问作者Galactic Ranger