Html CSS：一个孩子隐藏另一个孩子的活动

我想在不使用JS的情况下，通过按

#btn

来最小化

#test

。我在写这个：

CSS

  #test {
    width: 400px;
    height: 600px;
    background-color: green;
    transition: all 350ms;  
    -o-transition: all 350ms;  
    -moz-transition: all 350ms;  
    -webkit-transition: all 350ms; 
    overflow: hidden;
  }

  #wrapper:first-child:active #test {
    width: 0px;
  }

HTML

<div id = "wrapper">
  <button id = "btn">BTN!!</button>
  <div id = "test">e wvwe</div>
</div>

顺便说一句！！
e wvwe

不幸的是，

:active

与

#wrapper

相关，而不是

:first child

（即

#btn

）。

---

如何做我想做的事？

有几件事。您可能想查看这篇方便的文章：

您的第一个子项选择无效，因为#wrapper不是第一个子项<代码>：第一个子项与同一父项的子项相关

同样，您以前的选择器试图选择#test的id，该id在第一个子项中，而您的div不在按钮中…即使第一个子项选择器已工作

因此，您需要选择按钮元素，它是#wrapper的直接子元素，因此

，然后选择相邻的兄弟元素，它需要

+

有了这些，你就

  #wrapper > button:active + #test {
    width: 0px;
  }

---

最后，您应该知道，

：active

仅在按住鼠标按钮时有效。如果要将其切换为“单击”，则需要Javascript（或类似JQuery的JS库）。

将选择器更新为

element+element

选择器，如下所示：

#wrapper button:active+#test {
  width: 0px;
}

---

使用“+”选择器选择按钮的直接同级：

#btn:active + #test{
    width: 0px;
}