Question

我正在尝试复制this示例，但是对于特定元素，在这种情况下是正文，但它似乎不起作用：

＆＃13;

#ossm:checked + label ~ body {
  color: #f00;
}

＆＃13;

<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>

＆＃13;

http://jsfiddle.net/wvkphx2o/1/

Answer 1

为了将css应用于特定选择器之后的兄弟，我们需要使用〜或+（兄弟选择器）。

在上述情况下，如果要在选中复选框时更改标签文本的颜色，则必须使用以下代码。

<强> CSS

#ossm:checked + label, #ossm:checked ~ label {
  color: #00ff00;
}

Answer 2

正如@DavidThomas在评论中提到的那样，你没有正确使用~选择器。我能想象你想要实现的唯一想法就是这样：

#ossm:checked ~ div {
    background: #f00;
}
#ossm {
    position: relative;
    z-index:2;
}
div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    z-index:1;
}

<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
<div></div>

放置一个覆盖整个身体的div position: absolute。

复选框已检查属性不起作用

2 个答案: