What does the “>” (greater-than sign) CSS selector mean?

例如：

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

>符号到底是什么意思？

#1 楼

>是子组合器，有时会误称为直接后代组合器。1
这意味着选择器div > p.some_class仅选择直接嵌套在.some_class内部的div的段落，而不选择嵌套在其内部的任何段落。
插图：

 div > p.some_class { 
    background: yellow;
}

 <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由blockquote内的div包含，而不是div本身。尽管此p.some_class是div的后代，但它不是孩子。因此，虽然div > p.some_class不会与该元素匹配，但div p.some_class会使用后代组合器。

1许多人进一步打电话它是“直子”还是“直子”，但这是完全没有必要的（对我而言是令人讨厌的），因为子元素在定义上是直接的，因此它们的含义完全相同。没有所谓的“间接孩子”。

+1真的叫子选择器吗？如果是这样，那将是非常令人误解的。我想＃某物将是一个子选择器。

– alex
2010-09-08 1:31

@alex：是的：） #something可能意味着a是#something的孙子或曾孙（不考虑嵌套深度）。

– BoltClock♦
2010-09-08 1:33

@alex称为子组合器，空间称为后代组合器

–robertc
2011年1月9日23:31

当某人是其祖父母的孩子时，我们正在处理一个真正令人讨厌的乱伦实例。幸运的是，这在HTML中是不可能的。

–昆汀
2014-09-16 9:34

为了清楚起见，我没有听到任何外行将他们的孩子称为直接孩子。

– BoltClock♦
2015年11月24日13:08

#2 楼

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

组合器可以解释选择器之间的关系。

一个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组合器的更多信息

developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/…

–拉利特·亚达夫（Lalit Yadav）
18年5月14日在17:12

@premraj感谢您对父子css选择器的出色解释！

– YCode
19年2月12日在23:14

那么当您得到类似.entry-content> * {“ code”}的后跟.entry-content {“ other code”}的含义是什么？ .entry-content> *不能覆盖所有entry-content的子级吗？

– YCode
19年2月12日在23:18

#3 楼

正如其他人提到的，它是一个子选择器。这是适当的链接。

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

非常感谢您的链接！我在那里也发现了“相邻的兄弟选择器”。

– Misha Moroshko
2010年7月12日在4:46

您会在Sitepoint上找到浏览器支持。如果它对您的项目很重要，则在IE6中不起作用，其他任何地方都可以。此资源特别是。对于兄弟姐妹，：nth-child（）等有用，但支持仍不完整的兄弟姐妹

–FelipeAls
2010年7月12日在4:59

#4 楼

它匹配直接位于p之下的some_class类的div元素。

#5 楼

所有带有p类的some_class标签都是div标签的直接子元素。

#6 楼

html

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

css

div > p.some_class{
    color:red;
}

所有<p>和.some_class的直接子代都将应用样式给他们。

#7 楼

（子选择器）是在css2中引入的。。

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

有关CSS Celector及其用法的更多信息，请查看我的博客，
css选择器和css3选择器

#8 楼

CSS中较大的符号（>）选择器意味着右侧的选择器是左侧任何内容的直接后代/子代。

示例：

article > p { }

仅表示对文章后的段落进行样式设置。

编程黑洞网