Question

这是我的HTML设置：

<div class="form-item">
    <input type="checkbox" id="my-check">
</div>
<div class="form-item">
    <label for="my-check">I'm a checkbox</label>
</div>

在CSS的所有世界中，根据复选框是否被选中，是否有任何方式来标记该标签？（不改变当前的HTML结构？）

Answer 1

很遗憾，您无法使用CSS根据复选框的状态设置标签样式，而无需更改HTML。截至目前，CSS选择器支持子选择器和兄弟选择器，但没有选择器根据另一个元素的子元素设置一个元素的子元素。您可以在http://www.w3.org/TR/css3-selectors/#combinators找到CSS元素组合器的完整列表。

Answer 2

您可以将css伪选择器用作

input[type=checkbox]:checked  + label { background-color: gray; }

正在运行的js代码， http://jsfiddle.net/fc8c0hya/

当两者都包含在DIV中时，根据复选框检查设置标签样式

2 个答案: