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

问题描述

例如:

div >p.some_class {/* 一些声明 */}

> 符号到底是什么意思?

解决方案

> 是 子组合子，有时被误称为直接后代组合子.¹

这意味着选择器 div >p.some_class 只匹配 .some_class 的直接嵌套在一个 div 内的段落，而不匹配任何进一步嵌套的段落之内.这意味着每个元素匹配 div >p.some_class 也必须匹配 div p.some_class，带有 后代组合符(空格)，所以这两者经常被混淆是可以理解的.

比较子组合器和后代组合器的插图:

div >p.some_class {背景:黄色；}div p.some_class {红色;}

<p class="some_class">这里有一些文字</p><!-- [1] div >p.some_class, div p.some_class --><blockquote><p class="some_class">更多文字在这里</p><!-- [2] div p.some_class --></blockquote>

哪些元素被哪些选择器匹配?

1. 由 div > 匹配p.some_class 和 div p.some_class
   这个 p.some_class 直接位于 div 内部，因此在两个元素之间建立了父子关系.自从孩子"是后代"的类型，任何子元素根据定义也是后代.因此，这两条规则都适用.

2. 仅匹配 div p.some_class
   这个 p.some_class 包含在 div 中的 blockquote 中，而不是 div 本身.虽然这个p.some_class 是div 的后代，但它不是一个孩子；这是一个孙子.因此，仅应用其选择器中带有后代组合器的规则.

---

¹ _{许多人更进一步称其为直系子"；或直接子元素"，但这完全没有必要(而且对我来说非常烦人)，因为子元素无论如何都是直接的定义，所以它们的意思完全相同.没有间接孩子"这样的东西.}

For example:

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

What exactly does the > sign mean?

解决方案

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

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

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

Which elements are matched by which selectors?

1. Matched by both div > p.some_class and div p.some_class
   This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.

2. Matched by only div p.some_class
   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. Therefore, only the rule with the descendant combinator in its selector is applied.

---

¹ _{Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".}

这篇关于“>"是什么意思?(大于号)CSS 选择器是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！