懸停工作還是不工作取決於堆疊？

Question

JSFiddle： http : //jsfiddle.net/qguq4/19/

工作的HTML：

<div id="menu">hover me</div>
<div id="firstLayer"></div>

無效的HTML：

<div id="firstLayer"></div>
<div id="menu">hover me</div>

CSS：

#firstLayer {
  background-image:linear-gradient(90deg,red,red);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  width: 100%; 
  height: 100px; 
  min-width:900px; 
  position:absolute; 
  left:0; 
  top:0;
}

#menu {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#menu:hover ~ #firstLayer {
 clip: rect(10px,800px,80px,400px);
}

為什么懸停效果只有在工作#firstLayer來后#menu ？

Answer 1

那是一個通用的同級組合器。 第二個元素必須在第一個元素之前。

http://www.w3.org/TR/selectors/#general-sibling-combinators