什么是“>”（更大

 

例如： 

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

>符号的含义是什么？

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

这意味着选择器div > p.some_class只选择直接嵌套在 div的.some_class段落，而不是任何嵌套在其中的段落。

插图： 

<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>

选择什么，什么不是：

  • 选
    这个p.some_class直接位于div内部，因此在这两个元素之间建立了父子关系。

  • 未选中的
    这个p.some_class被div的blockquote包含，而不是div本身。 虽然这个p.some_class是div的后代，但它不是一个孩子; 这是一个孙子。

    因此，虽然div > p.some_class与此元素不匹配，但div p.some_class将使用后代组合器代替。

    • 1许多人更进一步称其为“直接子女”或“直接子女”，但这完全没有必要（并且令我非常讨厌），因为无论如何，子元素是立即定义的，因此它们意味着完全相同的东西。 没有“间接孩子”这样的事情。

    > （大于号）是一个CSS组合器。

    combinator是解释选择器之间关系的东西。

    CSS选择器可以包含多个简单选择器。 在简单的选择器之间，我们可以包含一个组合器。

    CSS3中有四种不同的组合器：

  • 后代选择器（空间）
  • 子选择器（>）
  • 邻近兄弟选择器（+）
  • 一般兄弟选择器（〜）

    • 注意： <在CSS选择器中无效。

    例如： 

    <!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

    输出：

    有关CSS Combinators的更多信息

    正如其他人所说，这是一个儿童选择器。 这是适当的链接。

    http://www.w3.org/TR/CSS2/selector.html#child-selectors

    链接地址: http://www.djcxy.com/p/22849.html

    上一篇: What does the ">" (greater

    下一篇: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?