为何该CSS后续兄弟选择器无法选中全部兄弟元素？

先看你给出的代码：

CSS代码 #

li:has(>label) {
  background: #0c0;
}
li~li:has(>label) {
  border: 4px solid #c0c;
}

HTML代码 #

<ul tabindex="-1">
<li><input type="radio" name="r6a" id="r61a" value="6.0a" /><label for="r60a">[Item 6.0]</label></li>
<li tabindex="0">[Item 6.1]</li>
<li><input type="radio" name="r6a" id="r62a" value="6.2a" /><label for="r62a">[Item 6.2]</label></li>
<li><input type="radio" name="r6a" id="r63a" value="6.3a" /><label for="r63a">[Item 6.3]</label></li>
<li tabindex="0">[Item 6.4]</li>
</ul>

你误解了第二个选择器的匹配逻辑，拆解一下：

• li~li:has(>label) 的结构是 (li ~ li):has(>label)，也就是先筛选出「前面有至少一个同级li元素」的li，再从这些li里挑出「直接包含label子元素」的。

逐个看每个li的匹配情况：

• Item 6.0：是第一个li，前面没有其他同级li，不满足li~li的条件，所以哪怕它符合:has(>label)，也不会被第二个选择器选中。
• Item 6.1：本身不包含label子元素，不符合:has(>label)，直接排除。
• Item 6.2：前面有两个同级li，满足li~li，同时包含label子元素，符合所有条件，被选中。
• Item 6.3：前面有三个同级li，满足li~li，同时包含label子元素，符合所有条件，被选中。
• Item 6.4：本身不包含label子元素，不符合:has(>label)，直接排除。

如果你的需求是「选中所有带label的li的后续兄弟元素」，那应该把选择器写成 li:has(>label) ~ li——这个才是先找到带label的li，再选中它后面的所有同级li（不管这些li有没有label）。

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