如何仅在有单选框选中时为未选中单选框的标签添加删除线？

DevOps 小满

2026-6-20

单选框标签样式控制问题

问题背景

原始HTML结构如下：

<div>
  <input type="radio" id="a" name="a"><label for="a">aaaa</label>
  <input type="radio" id="b" name="a"><label for="b">bbbb</label>
  <input type="radio" id="c" name="a"><label for="c">cccc</label>
  <input type="radio" id="d" name="a"><label for="d">dddd</label>
</div>

需求：

初始无单选框选中时，所有标签无删除线
选中某单选框后，其余未选中的单选框对应的标签显示删除线

尝试的第一个CSS逻辑存在问题：

input:not(:checked) + label {
    text-decoration: line-through;
}

该代码在有单选框选中时表现正确，但默认无选中状态下，所有标签都会显示删除线，不符合需求。

另一个临时方案只能给选中单选框之后的标签添加删除线，无法覆盖选中项之前的标签：

input[type="radio"]:checked+label+input+label,
input[type="radio"]:checked+label+input+label+input+label,
input[type="radio"]:checked+label+input+label+input+label+input+label {
  text-decoration: line-through;
}

纯CSS解决方案

可以利用CSS的:has()选择器实现需求，无需修改原有HTML结构：

/* 默认状态：所有标签无删除线 */
label {
  text-decoration: none;
}

/* 仅当容器内存在选中的单选框时，给未选中项的标签添加删除线 */
div:has(input[type="radio"]:checked) input:not(:checked) + label {
  text-decoration: line-through;
}

方案说明

div:has(input[type="radio"]:checked)：这个选择器只会在容器内有单选框被选中时触发，完美解决了默认无选中状态下所有标签被添加删除线的问题。
input:not(:checked) + label：精准匹配所有未被选中的单选框对应的标签，不管该标签在选中项的前面还是后面，都能统一添加删除线，无需写冗长的链式选择器。