>选择直系子女

例如，如果您有这样的嵌套 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]选择器，所有这些都非常有用。

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