时间戳

首页 > 解决方案 > CSS ~ 选择器 vs + 选择器

html - CSS ~ 选择器 vs + 选择器

问题描述

根据 W3Schools：

  • div + p {}选择<p>紧跟在元素之后的所有<div>元素

  • p ~ div选择<div>前面有一个<p>元素的每个元素

那么有什么区别呢？

我试图在悬停<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>

标签： htmlcsscss-selectors

解决方案

一个简单的差异演示

第一的+

只选择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>

并~选择. _ 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>

推荐阅读