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

Posted 2023-03-06

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

【英文标题】：CSS Selectors - difference between and when to use ">", "+" or " " [duplicate]

【发布时间】：2017-09-05 15:17:57

【问题描述】：

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

div > .class  
div .class 
div + .class 

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

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

【问题讨论】：

Immediate child, any child, and adjacent sibling

CSS '>' selector; what is it?

你搜索过关于那些选择器的东西吗？ .....

【参考方案1】：

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

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

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

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"   />
  </p>
  <span class="test">Span</span>
</div>
<h4 class="test">Title</h4>

【讨论】：

最好让代码解释答案是什么，你也这样做了。 ?