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]，请更改父级background-color的css <div>。我怎么能这样做？

类似的东西：

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

如果没有为id设置<div>，有没有办法做到这一点？

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

Answer 1

不幸的是这无法实现具有当前的CSS功能（希望将来会在未来的版本中使用）。现在只能使用Javascript或Jquery来完成。

CSS只支持child selector from a parent和不支持 parent selector from child。

Answer 2

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

您可以尝试使用兄弟选择器并将兄弟元素放在输入后面。

编辑：兄弟元素.inputbg的示例：

https://jsfiddle.net/pfv77ghe/

Answer 3

HTML

我认为这对您有用。

<input type="click" checked>

CSS

input[type= click]:checked+div{
  background-color: #f00;
}

完成活动后更改父母的css

3 个答案:

HTML

CSS