css - 完成事件后更改父项的 css

Question

<div class="pane">
  <div style="background-color: #f00">
    <input type="radio" name="select" id="radio1" checked />
    <label for="radio1">Radio 1</label>
  </div>

  <div>
    <input type="radio" name="select" id="radio2" />
    <label for="radio2">Radio 2</label>
  </div>
</div>

我想举办一个事件:如果 input[type=radio]单击，更改 css background-color parent 的(<div>)。我该怎么做？

类似于:

input[type="radio"]:checked < div {
    background-color: #f00
}

有没有办法在不设置 id 的情况下做到这一点？对于每 <div> ？

p/s:我也不想使用 javascript 或 jquery 来做到这一点。

Answer 1

css 中没有父级选择器，所以你不能。您可以尝试设置输入或标签的样式。

您可以尝试使用同级选择器并将同级元素绝对定位在您的输入后面。

编辑:带有同级元素 .inputbg 的示例:

https://jsfiddle.net/pfv77ghe/