Question

如何使用纯css通过引用获取父元素及其子元素？

＆＃13;

#checkbox{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#checkbox:checked (parentName){
  color: red;
}

＆＃13;

<label for="checkbox">
  <input type="checkbox" id="checkbox" />
  click me
</label>

＆＃13;

我知道我们可以简单地使用jQuery来查找子元素的父元素。像这样的东西; -

$(this).parent().css({'color': 'red'});

无论如何使用纯css选择器识别父选择器？

Answer 1

无论如何使用纯css选择器来识别父选择器？

没有。

我们还没有在原生CSS中拥有父选择器。但是在将来可能会有一些css方法可用。

解决问题的简单解决方法可以解决，例如将父label的文字内容包含在span之类的元素中：

＆＃13;

#checkbox{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#checkbox:checked + span{
  color: red;
}

＆＃13;

<label for="checkbox">
  <input type="checkbox" id="checkbox" />
  <span>click me</span>
</label>

＆＃13;