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

That is a general sibling combinator. The second element must be preceded by the first.

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