CSS '>'选择器是什么？

Question

我曾经在几个CSS代码中看到过 "greater than" （>）符号，但我无法理解它的作用。它具体是做什么的呢？

- Bojangles

---

那实际上是一个“大于”符号。尖括号（据我所记）是指向上或向下的“v”形符号。 - Kyle

请查看以下参考链接：https://www.w3.org/TR/CSS21/selector.html%23id-selectors，https://web.dev/learn/css/selectors/ - Faegheh Mohammadian

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 {
    ...
}

您的规则只适用于具有“middle”类的那些div，因为这些div是具有“outer”类的元素的直接后代(即直接子级)(除非当然，您声明其他更具体的规则以覆盖这些规则)。请参见fiddle。

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]选择器，它们都非常有用。

此页面列出了所有可用选择器的完整列表，以及它们在各种浏览器中的支持情况（主要是 IE 存在问题），以及它们的好例子。

- Spudley

---

@JamWaffles - 我已经添加了更多信息，同时提供了一个指向Quirksmode.org的链接，这将有助于您的研究。 - Spudley

@Spudley，你提供的quirksmode页面并没有提到这些选择器。 - Spundun

@Spundun - 当时是可以的；在此期间，quirksmode网站布局已经改变。新链接是http://www.quirksmode.org/css/selectors/。我会在答案中更新链接。 - Spudley

我认为用户可以通过查看这个例子并离开，认为 > 将选择最直接的子元素。我认为上面的例子可以通过展示多个直接子元素受到影响来改进。 - Govind Rai

那么符号 > 是什么意思？ - Gerry

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>

- Adam Kiss

---

唯一的例子展示了空格组合器和>组合器之间的区别。您可能希望给div>b一个不同的颜色来更好地说明区别。 - BoltClock

@Adam Kiss - 别担心，你获得的声望分比我高。 （我也投票支持了你的回答，所以别有什么难过的感觉，好吗？） - Spudley

没有对给出优秀答案的人有任何不满，Spudley :] - Adam Kiss

演示：http://codepen.io/krish4u/pen/jpKhG请直接返回翻译后的文本。 - Krish

值得注意的是，> 只查看标记结构向下一级，而不会进一步向下查看。 - b4rtekb

Answer 3

这是CSS的子选择器。例如：

div > p选择所有直接作为 div 子元素的段落。

请查看此链接

- dheerosaur

Answer 4

正如其他人所说，这是直接的子元素，但值得注意的是，这与只留下一个空格不同...一个空格适用于任何后代元素。

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

div>span可以匹配这个，但无法匹配这个：

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

为了匹配那个，你可以使用 div>p>span 或者 div span。

- Nathan MacInnes

Answer 5

这是一个子元素选择器。

当一个元素是某个元素的子元素时，它就会匹配。它由两个或多个选择器组成，用">"分隔。

例如：

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

body > P { line-height: 1.3 }

例子：

下面的例子结合了后代选择器和子选择器：

div ol>li p

它匹配的是在LI元素下的后代P元素；LI元素必须是OL元素的子元素；OL元素必须是DIV元素的后代。注意，">"组合器周围的可选空格已被省略。

- Margarez

Answer 6

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

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

- David Mårtensson

---

旁注：你相信w3schools吗？哎呀。阅读http://www.w3fools.com/。 - Raptor

不，我不信任w3schools，但偶尔他们确实是正确的；）但如果你有更好的链接来解释父级引用，我很乐意推荐它，当我写这篇文章时，我还没有意识到w3schools的错误:P - David Mårtensson

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

Answer 7

它的意思是父/子

例如：

html>body

这是在说body是html的一个子元素

查看：选择器

- Aim Kai