CSS选择器-使用“>”，“+”或“”之间的区别以及何时使用[重复]

Question

在使用 CSS 时，我可以通过以下方式查询元素：

div > .class  
div .class 
div + .class 

但是，我不能完全说出每个DOM 查询之间的确切区别。它们都指向子元素吗？我知道“>”和“”（空格）可以。

但是在什么情况下我会使用它们呢？

Answer 1

在 CSS 中，这些被称为 Combinators，意味着三种不同的东西：

1. div > .class：被称为Child selector，将选择div的直接子元素并具有.class类的所有元素。

2. div .class: 被称为Descendant selectors，将选择一个div中的所有元素，并具有.class类。

3. div + .class：称为Adjacent sibling selector，将匹配紧跟div 并具有.class 类的任何元素。

示例：

在下面的例子中：

<div>
  <p class="test">
    <a href="#" class="test">
      Testing link</a>
    <img class="test"/>
  </p>
  <span class="test">A span</span>
</div>
<h4 class="test">A title</h4>

• div > .test 将仅匹配 <p> 和 <span> 元素。
• div .test 将匹配 <p>、<a>、<img> 和 <span> 元素。
• div + .test 将仅匹配 <h4> 元素，因为它紧跟在 <div> 之后。

演示：

div .test {
  background: yellow;
}

div>.test {
  background: red;
}

div+.test {
  background: green;
}

<div>
  <p class="test">
    Pragraph
    <a href="#" class="test">
      link</a>
    <img class="test" width="50px" height="50px" />
  </p>
  <span class="test">Span</span>
</div>
<h4 class="test">Title</h4>