Question

我正在使用来自this答案的黑客来制作图片以在点击时调整大小（复选框方法）。它工作正常。但是，当我尝试在图像上单击时在文本上应用css样式时，它不起作用：

<html>
<body>
  <input type="checkbox" id="img-box"/>
  <label for = "img-box">
    <img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
  </label>

  <p id="some-text">
    some text
  </p>
</body>
</html>


#img-box:checked + label > img  {
    width: 100px;

}

#img-box:checked + p  {
    background-color: red;

}

我在这里犯了什么错误，我应该如何解决？

jsfiddle：https://jsfiddle.net/eus18r3h/

Answer 1

id为“img-box”的输入元素不是p标签的直接兄弟。＃img-box：checked + p只会设置一个直接位于输入旁边的p标签，中间有一个标签。

这将是您正在寻找的选择器'＃img-box：checked + label + p'

Answer 2

您已使用相邻的同级组合子（+）作为段落标记，但只有在您有一个接一个的元素时它才有效。因此，由于您之间有标签标签，因此无效。如果您只是将+替换为通用兄弟组合器~，则代码应该可以正常工作。

#img-box:checked ~ p{
    background-color: red;
}

单击图像，更改文本的背景

2 个答案: