CSS-如果[ELEM]：选中，则设置[ELEM2]的高度

试图让CSS根据是否选中单选按钮来设置元素的高度。在代码中，我已经注释了可以工作和不可以工作的行。我做错了什么

article { height: 12em; } /* Works */
#slide1:checked ~ #slides .inner { margin-left:0; } /* Works */
#slide1:checked ~ #S1 { height: auto; } /* Doesn't Work */
#slide2:checked ~ #slides .inner { margin-left:-100%; } /* Works */
#slide2:checked ~ #S2 { height: auto; } /* Doesn't Work */
#slide3:checked ~ #slides .inner { margin-left:-200%; } /* Works */
#slide3:checked ~ #S3 { height: auto; } /* Doesn't Work */
#slide4:checked ~ #slides .inner { margin-left:-300%; } /* Works */
#slide4:checked ~ #S4 { height: auto; } /* Doesn't Work */

---

您以错误的方式使用同级选择器。~combinator分隔两个选择器，仅当第二个元素前面有第一个元素时，才匹配第二个元素，并且两个元素共享一个公共父元素

语法：

element ~ element { style properties }

p ~ span {
  color: red;
}

<span>This is not red.</span>

<p>Here is a paragraph.</p>
<code>Here is some code.</code>

<span>And here is a span.</span> //The text will be red in color

HTML:

element ~ element { style properties }

p ~ span {
  color: red;
}

<span>This is not red.</span>

<p>Here is a paragraph.</p>
<code>Here is some code.</code>

<span>And here is a span.</span> //The text will be red in color

CSS:

element ~ element { style properties }

p ~ span {
  color: red;
}

<span>This is not red.</span>

<p>Here is a paragraph.</p>
<code>Here is some code.</code>

<span>And here is a span.</span> //The text will be red in color

在为HTML提供的快照中，#S1、#S2、#S3等不与输入共享公共父级，因此兄弟选择器在此处不起作用。修改html或使用js进行尝试

资料来源：

---

更多信息：

还需要查看您的html。@SeanStopnik可以解决此问题：您确定问题不是

height:auto

？这并不总是有意义的。如果您添加边框或背景色怎么办？@Kobi即使它没有意义，但当我在开发人员控制台中手动输入它时，它仍然有效。问题是，css没有添加高度样式。可能重复-简而言之，它高度依赖于标记中每个[ELEM2]的位置。谢谢，我最终选择了js。我在css中设置了一些类，然后在js中应用/删除了类。