>
Select 直接子项例如,如果您有如下嵌套的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是具有"out"类的元素的直接后代(直接子元素)(当然,除非您声明其他更具体的规则覆盖这些规则).请参见小提琴.
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>
相反,如果 Select 器之间的空格是而不是
>
,则规则将适用于这两个嵌套的div.这个空间更常用,它定义了一个"后代 Select 器",这意味着它会查找树下的任何匹配元素,而不是像>
一样只查找直接的子元素.
注:IE6不支持>
Select 器.不过,它确实可以在当前所有其他浏览器上运行,包括IE7和IE8.
如果您正在研究不太常用的CSS Select 器,您可能还希望查看+
、~
和[attr]
Select 器,所有这些 Select 器都非常有用.
This page提供了所有可用 Select 器的完整列表,以及它们在各种浏览器中支持的详细信息(主要是IE有问题),以及它们的使用示例.