CSS选择器 - 区别和何时使用＆＃34;＆gt;＆＃34;，＆＃34; +＆＃34;或＆＃34; ＆＃34;

Question

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

div > .class  
div .class 
div + .class 

但是，我不能完全区分这些DOM个查询之间的确切区别。他们都指向儿童元素吗？我知道＆＃34;＆gt;＆＃34;和＆＃34; ＆＃34; （空间）做。

但在什么情况下我会使用每种？

Answer 1

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

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

   < / LI>

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>