点击图片调尺寸及修改文本背景样式失效问题排查

嘿，我来帮你拆解下这个问题：

你的CSS样式失效，核心原因是相邻兄弟选择器（+）的匹配规则限制。+选择器只能精准匹配紧接在目标元素之后的第一个同级兄弟元素。看你的HTML结构：

<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>

#img-box后面紧挨着的兄弟是<label>，而不是<p>，所以#img-box:checked + p这条规则根本找不到对应的元素，自然不会生效。

这里给你几个可行的修复方案：

方案一：改用通用兄弟选择器（~） #

~选择器可以匹配目标元素之后所有同级的指定元素，不需要紧挨着，修改CSS即可，不用动HTML结构：

#img-box:checked + label > img { width: 100px; }
#img-box:checked ~ p { background-color: red; }

方案二：链式使用相邻兄弟选择器 #

如果想坚持用相邻选择器，可以链式匹配后续的兄弟元素，同样不用改HTML：

#img-box:checked + label > img { width: 100px; }
#img-box:checked + label + p { background-color: red; }

这条规则的逻辑是：先找到被选中的#img-box后面的<label>，再找到<label>后面紧挨着的<p>，这样就能精准匹配到目标文本了。

内容的提问来源于stack exchange，提问作者parsecer