">"（大于号）CSS选择器是什么意思？

Question

">"（大于号）CSS选择器是什么意思？

564

例如：

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

>符号到底是什么意思？

- Misha Moroshko

8个回答

61

>（大于号）是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组合器的更多信息

- Premraj

1

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors - Lalit Yadav

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

如果你得到了像.entry-content > * {"code" }这样的东西，后面跟着.entry-content {"other code" }，那么这是什么意思呢？难道.entry-content > *不包括所有entry-content的子元素吗？ - YCode

14

正如其他人提到的那样，这是一个子选择器。这是相关链接。

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

- Dagg Nabbit

非常感谢您提供的链接！我在那里还发现了“相邻兄弟选择器”。 - Misha Moroshko

您可以在 Sitepoint 上找到浏览器支持。如果您的项目需要考虑 IE6，那么此功能将无法正常工作，但在其他地方都可以。对于兄弟姐妹、:nth-child() 等仍然不完整的支持，此资源尤其有用。 - FelipeAls

10

它匹配直接位于 div 下的带有类名为 some_class 的 p 元素。

- dan04

5

所有class为some_class的p标签，它们是div标签的直接子元素。

- tschaible

5

(子选择器) 是在 CSS2 中引入的。 div p 选择所有作为 div 元素后代的 p 元素，而 div > p 只选择子级 p 元素，不包括孙子、曾孙等。

<style>

  div p{ color:red }       /* match all p in div */
  div > p{ color:blue }    /* match only children p of div*/

</style>

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

了解CSS选择器及其使用的更多信息，请查看我的博客， css选择器和css3选择器

- Avinash Malhotra

3

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

div > p.some_class{
    color:red;
}

所有直接子元素中带有 .some_class 的 <p> 将应用该样式。

- Suraj Rawat

1

CSS中的大于号选择器（>）表示右侧选择器是左侧元素的直接后代/子元素。

例如：

article > p { }

只针对文章后面的段落进行样式设置。

- authentichigh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

>是子元素组合器，有时被错误地称为直接后代组合器。¹这意味着选择器div > p.some_class仅匹配直接嵌套在div内部的.some_class段落，而不匹配嵌套更深层次的任何段落。这意味着每个匹配div > p.some_class的元素必然也符合后代组合器(空格)div p.some_class，所以两者经常会被误解混淆。

下面是一个比较子元素组合器和后代组合器的示例:

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>

哪些选择器匹配哪些元素？

div > p.some_class和div p.some_class都匹配
这个p.some_class直接位于div内，因此两个元素之间建立了父子关系。由于“子元素”是“后代元素”的一种，任何子元素都被定义为后代元素。因此，两条规则都适用。
仅匹配div p.some_class
这个p.some_class包含在div内的blockquote中，而不是div本身。虽然这个p.some_class是div的后代，但它不是子元素；它是孙子元素。因此，只有带有后代组合器的选择器规则会应用。

¹ _{许多人进一步称其为“直接子元素”或“立即子元素”，但这完全没有必要（并且对我来说非常烦人），因为按定义，子元素本来就是即时的。不存在“间接子元素”这样的东西。}