CSS & # 39;祝辞& # 39;选择器;是什么?

我在CSS代码中见过几次“大于”(>)，但我不知道它是做什么的。它能做什么?

353743 次浏览
小开

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

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

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>

小开

它是CSS子选择器。例子:

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

看到# EYZ0

小开

它的意思是父母/孩子

例子:

html >身体

也就是说body是HTML的子元素

看看:选择器

小开
最佳答案

>选择直接子代

例如，如果你像这样嵌套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有问题)对它们的支持的详细信息，以及它们的使用示例。

小开

它声明了父引用，看看这一页的定义:

http://www.w3.org/TR/CSS2/selector.html#child-selectors

小开

正如其他人所说，它是一个直接子元素，但值得注意的是，这与只是留下一个空格不同……空间是给任何后代的。

<div>
<span>Some text</span>
</div>

div>span会匹配这个，但是不会匹配这个:

<div>
<p><span>Some text</span></p>
</div>

为了匹配它，你可以使用div>p>span或div span。

小开

它是一个子选择器。

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

示例(s):

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

body > P { line-height: 1.3 }

示例(s):

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

div ol>li p

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


提交答案