CSS 选择器 - ">"、 "+"或 ""之间以及何时使用的区别

Question

这个问题在这里已经有了答案:





CSS '>' selector; what is it? [duplicate]

(7 个回答)



What does the "+" (plus sign) CSS selector mean?

(13 个回答)


4年前关闭。




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

div > .class  
div .class 
div + .class 

但是我不太清楚这些 DOM 之间的确切区别查询。它们都指向子元素吗？我知道“>”和“”(空格)可以。

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

Answer 1

在 CSS 中，这些被称为 组合器 并意味着三件不同的事情:

div > .class : 被称为 Child selector并且将选择所有作为 div 的直接子元素的元素并有类(class) .class .

div .class : 被称为 Descendant selectors并将选择 div 内的所有元素并具有类 .class .

div + .class : 被称为 Adjacent sibling selector并且将匹配紧跟在 div 后面的任何元素并有类(class) .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>