html - 悬停是否有效取决于堆叠？

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