使用+和〜组合器进行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的帮助，就无法做到这一点。

有可能吗？嗯，是的。

伪类.map(...).getOrElse(throw ...)

Selectors Level 4 Editor's Draft（2017年8月23日起）包含一个:has()伪类，可以解决此问题。

有些事情......

:has()

...应该在选定的选项之后选择.option:has(input:checked) ~ .option > label { color: red; } 。

根据this great answer：

  

任何浏览器都不支持此功能。

由于BoltClock在评论中有很好的提及，“主题”选择器被删除（从this awesome answer可以看出）。

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

在相同的草稿（不一样！）上，他们引入了选择器（label）的'主题'，它确定选择器的哪个部分应用这些属性。见this other great answer。但是，现在已经放弃了。

Answer 2

你只需要不那么具体。 DEMO

定位.option w / a嵌套li.b，旁边是.option

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