Question

尝试让我的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 */

Answer 1

您正在以错误的方式使用兄弟选择器。〜组合器分隔两个选择器，只有当第一个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

<强>语法：

element ~ element { style properties }

<强> HTML：

p ~ span {
  color: red;
}

<强> CSS：

<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尝试。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

更多：https://css-tricks.com/child-and-sibling-selectors/

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

1 个答案: