CSS'＆gt;'选择;它是什么？

Question

  

可能重复：
  What does “>” mean in CSS rules?

我已经看过几次在CSS代码中使用的“大于”（>），但我无法弄清楚它的作用。它做了什么？

Answer 1

>选择直接孩子

例如，如果你有这样的嵌套div：

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

并在样式表中声明一条css规则，如下所示：

.outer > div {
    ...
}

您的规则仅适用于那些具有“中间”类的div，因为这些div是具有“外部”类的元素的直接后代（直接子项）（当然，除非您声明其他更具体的规则覆盖这些规则）。见小提琴。

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

旁注

如果您在选择器之间有一个空格而不是>，则您的规则将适用于两个嵌套的div。该空间更常用，并定义了一个“后代选择器”，这意味着它在树下寻找任何匹配的元素，而不仅仅是>所做的直接子节点。

注意：IE6不支持>选择器。它确实适用于所有其他当前浏览器，包括IE7和IE8。

如果你正在研究不太常用的CSS选择器，你可能还想看看+，~和[attr]选择器，所有这些都可以非常是有用的。

This page包含所有可用选择器的完整列表，以及它们在各种浏览器中支持的详细信息（主要是有问题的IE）以及它们的使用示例。

Answer 2

>选择所有直接后代/子女

空格选择器将选择所有深层后代，而大于>选择器将仅选择所有直接后代。例如，请参阅小提琴。

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */

<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

Answer 3

这是CSS子选择器。例如：

div > p选择所有直接子节点的段落。

请参阅this

Answer 4

正如其他人所说的那样，这是一个直接的孩子，但值得注意的是，这与留下空间不同......任何后代都有空间。

<div>
  <span>Some text</span>
</div>

div>span会与此匹配，但不匹配此内容：

<div>
  <p><span>Some text</span></p>
</div>

为了与之匹配，您可以div>p>span或div span。

Answer 5

它声明了父引用，请查看此页面的定义：

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

Answer 6

这是一个儿童选择器。

当元素是某个元素的子元素时匹配。它由两个或多个由“＆gt;”分隔的选择器组成。

实施例（一个或多个）：

以下规则设置作为BODY子项的所有P元素的样式：

body > P { line-height: 1.3 }

实施例（一个或多个）：

以下示例结合了后代选择器和子选择器：

div ol>li p

它匹配作为LI的后代的P元素; LI元素必须是OL元素的子元素; OL元素必须是DIV的后代。请注意“＆gt;”周围的可选空格组合器已被排除在外。

Answer 7

这意味着父母/子女

示例：

HTML＆GT;体

这就是说身体是html的孩子

退房：Selectors