什么是“>”， （大于号）CSS选择器是什么意思？ [英] What does the ">" (greater-than sign) CSS selector mean?

问题描述

例如：

div > p.some_class {
  /* Some declarations */
}

> 符号是什么意思？

推荐答案

> 是子组合器，有时会错误地称为直接后代组合器。 ¹

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

这意味着选择器 div& p.some_class 只选择 .some_class 中直接嵌套 的段落 div ，而不是进一步嵌套的任何段落。

That means the selector div > p.some_class only selects paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within.

例如：

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

选择什么和什么不是：

1. 已选择
   
   此 p.some_class 直接位于<$ c

1. Selected
   This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements.

未选择 >

此 p.some_class 由中的 blockquote > div ，而不是 div 本身。虽然这个 p.some_class 是 div 的后代，它不是一个孩子;

Not selected
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild.

因此， div> p.some_class 将不匹配此元素， div p.some_class 将使用 descendant combinator 。

Consequently, while div > p.some_class won't match this element, div p.some_class will, using the descendant combinator instead.

---

¹ _{许多人进一步称之为直接孩子或直接孩子，但这是完全不必要的恼人我），因为子元素根据定义是立即 ，所以它们意味着完全相同的事情。没有间接孩子这样的东西。}

这篇关于什么是“&gt;”， （大于号）CSS选择器是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！