如何用CSS选择器选中选中复选框后到下一个输入框前的<a>元素？

当前可用的解决方案（非单个选择器） #

目前CSS原生还没支持你提交的:until伪类提案，要实现需求可以用两个选择器组合来精准控制样式范围：

/* 先给选中复选框之后的所有<a>统一着色 */
input[type="checkbox"]:checked ~ a {
  color: #ff0000;
}
/* 把后续复选框之后的<a>恢复默认颜色，相当于截断范围 */
input[type="checkbox"] ~ input[type="checkbox"] ~ a {
  color: initial;
}

这个方案能适配任意数量的动态<a>元素，也能解决你提到的第4行场景BUG。

单个选择器的未来实现方式 #

等:until伪类提案落地后，就能用单个选择器直接实现需求：

input[type="checkbox"]:checked ~ a:until(input[type="checkbox"]) {
  color: #ff0000;
}

:until的核心作用就是匹配当前元素之后、直到指定选择器匹配元素之前的所有目标元素，完全符合你的场景需求。

关于:has/:is组合失败的原因 #

:has伪类目前主要用于基于子元素/后续元素选择父元素，没法直接用来精准限定“下一个之前”的兄弟元素范围，所以你之前尝试的组合无法达到预期效果。

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