【发布时间】：2011-05-26 11:31:35
【问题描述】：
我在 CSS 代码中见过几次“大于”（>），但我不知道它的作用。它有什么作用？
【问题讨论】：
-
这实际上是一个“大于”的符号。人字形（据我记得）是向上或向下方向的“v”。
标签： css css-selectors
【发布时间】：2011-05-26 11:31:35
【问题描述】：
> 选择直系子女
例如，如果您有这样的嵌套 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 存在问题），以及它们的使用示例。
【讨论】：
-
@JamWaffles - 我添加了更多信息，以及指向 Quirksmode.org 的链接，这应该有助于您的研究。
-
整洁！感谢您的链接。我已经在一些项目中使用了
[attr]选择器。我也会调查+和~。 -
...“当前”是指您的访问者使用的每个浏览器...当然，除非您使用 IE6 的用户不超过 2%
-
@JamWaffles - 如果您使用的是
[attr]，那么您可以放心使用>和'~'，因为浏览器对这三个的支持大致相同。 '+' 在 IE7+8 中有点不稳定，但可以使用。 -
@Spundun - 当时确实如此； quirksmode 网站布局在此期间发生了变化。新链接是quirksmode.org/css/selectors。我会更新答案中的链接。
> 选择所有直系后代/子女
空格 选择器将选择所有深层后代，而大于> 选择器将仅选择所有直接后代。以小提琴为例。
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>【讨论】：
-
+1 唯一显示空白组合器和
>组合器之间区别的示例。不过，您可能希望给div>b一个不同的颜色以更好地说明差异。 -
@Adam Kiss：别担心，随着时间的推移，随着选票的积累，我相信你会走向民粹主义……明年再来看看：D
-
@Adam Kiss - 别担心；你的代表分数仍然比我多。 （我也投票给你的答案，所以没有难过的感觉，嗯？）
-
对给出很好答案的人没有难过的感觉 Spudley :]
-
+1 切中要害。演示：codepen.io/krish4u/pen/jpKhG
【讨论】：
正如其他人所说，它是一个直接的孩子，但值得注意的是，这与只留下一个空格不同......一个空格是给任何后代的。
<div>
<span>Some text</span>
</div>
div>span 会匹配这个，但它会不匹配这个：
<div>
<p><span>Some text</span></p>
</div>
要匹配，您可以使用div>p>span 或div span。
【讨论】：
这是一个子选择器。
当一个元素是某个元素的子元素时匹配。它由两个或多个以“>”分隔的选择器组成。
示例：
以下规则设置作为 BODY 子级的所有 P 元素的样式：
body > P { line-height: 1.3 }
示例：
以下示例结合了后代选择器和子选择器：
div ol>li p
它匹配一个 P 元素，它是一个 LI 的后代； LI 元素必须是 OL 元素的子元素； OL 元素必须是 DIV 的后代。请注意，“>”组合符周围的可选空格已被省略。
【讨论】：
它声明了父引用，看这个页面的定义：
【讨论】：
-
旁注： 你信任 w3schools 吗？哎呀。阅读w3fools.com
-
不，我不信任 w3schools，但偶尔他们确实做对了 ;) 但是，如果您有更好的链接来解释父母参考资料，我会非常乐意推荐它，当我写这篇文章时，我还没有意识到 w3schools 的错误：P
【讨论】：