CSS ~选择器vs +选择器

Question

根据W3Schools

• div + p {}选择紧接在<div>元素之后的所有<p>元素
• p ~ div选择每个在<p>元素前面的<div>元素

那有什么区别？

当<div id="bar">处于悬停状态时，我试图使<div id="foo">出现，而在我的CSS中，#foo:hover ~ #bar和#foo:hover + #bar似乎都在做同样的事情。

选择器

选择器

​

#foo,
#bar {
  height: 200px;
  width: 200px;
}

#foo {
  background-color: indianred;
  cursor: pointer;
}

#bar {
  visibility: hidden;
  background-color: steelblue;
}

/* Example 1 */
#foo:hover ~ #bar {
  visibility: visible;
}
/* Example 2 */
#foo:hover + #bar {
  visibility: visible;
}
/* Both example 1 & 2 do the same thing */

<div id="foo">

</div>

<div id="bar">

</div>

​

Answer 1

差异的一个简单证明

第一+

选择only p 紧接div

​

div+p {
  color: Red;
}

<div>
  SOME DIV
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore unde ipsam iusto veniam, neque natus perferendis pariatur, ipsa doloremque odit atque sunt vitae. Tempore iste nesciunt sint assumenda accusamus dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sint, ullam reiciendis officia placeat tenetur enim harum eos adipisci natus quis totam corrupti nostrum at sunt ipsam labore dolor voluptate.</p>

​

~在div之后选择all p。

​

div~p {
  color: red;
}

<div>
  SOME DIV
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore unde ipsam iusto veniam, neque natus perferendis pariatur, ipsa doloremque odit atque sunt vitae. Tempore iste nesciunt sint assumenda accusamus dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sint, ullam reiciendis officia placeat tenetur enim harum eos adipisci natus quis totam corrupti nostrum at sunt ipsam labore dolor voluptate.</p>

​