>选择所有直系后代/子代

空格选择器将选择所有深子代，而大于>的选择器将只选择所有直接子代。例如提琴。

Div{边框:1px纯黑色;margin-bottom: 10 px;｝ .a b{颜色:红色;} /*每个约翰都是红色的*/ .b > b{颜色:蓝色;} /*只有约翰福音3和约翰福音4是蓝色的*/ < div class = " " > 约翰·1 < p > < b > < / b > < / p > 约翰·2 < p > < b > < / b > < / p > 约翰< b > 3 < / b > 约翰4 < b > < / b > < / div > < div class = " b " > 约翰·1 < p > < b > < / b > < / p > 约翰·2 < p > < b > < / b > < / p > 约翰< b > 3 < / b > 约翰4 < b > < / b > < / div >

>选择直接子代

例如，如果你像这样嵌套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”的元素的直接后代(直接子代)(当然，除非您声明其他更具体的规则覆盖这些规则)。看到小提琴。

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有问题)对它们的支持的详细信息，以及它们的使用示例。

>选择所有直系后代/子代

空格选择器将选择所有深子代，而大于>的选择器将只选择所有直接子代。例如提琴。

Div{边框:1px纯黑色;margin-bottom: 10 px;｝ .a b{颜色:红色;} /*每个约翰都是红色的*/ .b > b{颜色:蓝色;} /*只有约翰福音3和约翰福音4是蓝色的*/ < div class = " " > 约翰·1 < p > < b > < / b > < / p > 约翰·2 < p > < b > < / b > < / p > 约翰< b > 3 < / b > 约翰4 < b > < / b > < / div > < div class = " b " > 约翰·1 < p > < b > < / b > < / p > 约翰·2 < p > < b > < / b > < / p > 约翰< b > 3 < / b > 约翰4 < b > < / b > < / div >

它是CSS子选择器。例子:

Div > p选择Div的所有直接子段落。

看到这个

它的意思是父母/孩子

例子:

html >身体

也就是说body是HTML的子元素

检查:选择器

它是一个子选择器。

当一个元素是某个元素的子元素时，它匹配。它由两个或多个选择器组成，以“>”分隔。

示例(s):

下面的规则设置了BODY的所有子元素P的样式:

body > P { line-height: 1.3 }

示例(s):

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

div ol>li p

它匹配LI的后代P元素;LI元素必须是OL元素的子元素;OL元素必须是DIV的后代。注意，“>”组合符周围的可选空格被省略了。