使用 和〜组合器的CSS目标选择

Question

我正在努力获取以下代码以正确定位。有人可以帮助我解决这个问题吗？

我有一组星级收音机按钮。这很烦人，但是每个无线电字段都必须包裹在<div class="option">中。我的目标行为是：

1）选择单选按钮（即值编号4）时，所有先前的标签都是针对的，并适当颜色。

2）当悬停时，CSS覆盖了检查的行为，并在悬停在输入之前的所有标签。

我没有在.option标签中包裹的每个输入而没有使用它，因为这是我无法与option标签一起使用的。

-

所以，我已经简化了代码。

在哪里可以正常工作....

label {
  font-size: 20px;
}
input[type*="radio"]:checked + label {
  color: blue;
}
input[type*="radio"]:checked + label ~ input[type*="radio"] + label {
  color: red;
}

<div>
  <input type="radio" id="q1" name="radio" ><label for="q1">1</label>
  <input type="radio" id="q2" name="radio" ><label for="q2">2</label>
  <input type="radio" id="q3" name="radio" checked><label for="q3">3</label>
  <input type="radio" id="q4" name="radio"><label for="q4">4</label>
  <input type="radio" id="q5" name="radio"><label for="q5">5</label>
</div>

我如何以与上述完全相同的行为使以下工作？

label {
  font-size: 20px;
}
.option {
  display: inline-block;
}
input[type*="radio"]:checked + label {
  color: blue;
}
.option > input[type*="radio"]:checked + label ~ .option > input[type*="radio"] + label {
  color: red;
}

<div class="container">
  <div class="option">
    <input type="radio" id="q1" name="radio"><label for="q1">1</label>
  </div>
  <div class="option">
    <input type="radio" id="q2" name="radio"><label for="q2">2</label>
  </div>
  <div class="option">
    <input type="radio" id="q3" name="radio" checked><label for="q3">3</label>
  </div>
  <div class="option">
    <input type="radio" id="q4" name="radio"><label for="q4">4</label>
  </div>
  <div class="option">
    <input type="radio" id="q5" name="radio"><label for="q5">5</label>
  </div>
</div>

Answer 1

从CSS的当前状态开始，没有JavaScript的帮助。

有可能吗？好吧，是的。

---

伪级:has()

选择器级别4编辑的草案（2017年8月23日起）包括:has()伪级，该类别将解决此问题。

与...

的线

.option:has(input:checked) ~ .option > label {
    color: red;
}

...应该选择label s以选择选项。

根据这个很好的答案：

这仍然不受任何浏览器的支持。

---

正如博尔特克洛克（Boltclock）在评论中提到的那样，"主题"选择器被删除（从这个很棒的答案可以看出）。

为了完成，我将保留一些原始答案：

on 相同的草稿（不相同！），他们引入了选择器（$）的"主题"，该选项确定了选择器的哪一部分要将propeties应用于。看到另一个很好的答案。但是，现在已经删除了。

Answer 2

您只需要较少具体即可。演示。

针对.option W/A嵌套li.b，旁边任何.option

.option ~ .option li.b {
  background-color: powderblue;
}