CSS'>'选择器；它是什么？

Question

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

Answer 1

> 选择直系子女

例如，如果您有这样的html" target="_blank">嵌套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。该空间更为常用，并定义了“后代选择器”，这意味着它将在树上查找任何匹配的元素，而不是像dos那样直接查找子元素>`。

注意：>IE6不支持选择器。不过，它确实可以在所有其他当前浏览器中使用，包括IE7和IE8。

如果你正在寻找进入孔，使用较少的CSS选择器，你可能也想看看+，~和[attr]选择，所有这些都可以是非常有用的。

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