Question

我希望在没有JS的情况下按#test来最小化#btn。我写的是这样的：

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>

http://jsfiddle.net/f3NeA/1/

不幸的是，:active与#wrapper有关，而与:first-child无关（即#btn）。怎么做我想要的？

Answer 1

有几件事。您可能想查看这篇方便的文章：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

您的第一胎选择无效，因为#wrapper不是第一个孩子。 :first-child与同一父母的子女有关。

同样地，您之前的选择器试图选择 在内的第一个孩子而你的div不在按钮内的ID：即使第一个子选择器已经工作了。

所以你需要选择一个按钮元素，它是#wrapper的直接子元素，因此选择>，然后选择需要+的相邻兄弟。

你得到了......

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

JSfiddle Demo

最后，您应该知道:active仅在按住鼠标按钮时有效。如果你想将其切换为“点击”，你需要Javascript（或像JQuery这样的JS库）。

Answer 2

将您的选择器更新为element+element选择器，如下所示：

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

http://jsfiddle.net/f3NeA/8/

Answer 3

使用'+'选择器选择按钮的直接兄弟：

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

<强> Updated fiddle

CSS：主动让孩子隐藏另一个孩子

3 个答案: