我曾经在几个CSS代码中看到过 "greater than" (>
)符号,但我无法理解它的作用。它具体是做什么的呢?
我曾经在几个CSS代码中看到过 "greater than" (>
)符号,但我无法理解它的作用。它具体是做什么的呢?
>
选择子元素例如,如果你有像这样嵌套的 div 元素:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
.outer > div {
...
}
您的规则只适用于具有“middle”类的那些div,因为这些div是具有“outer”类的元素的直接后代(即直接子级)(除非当然,您声明其他更具体的规则以覆盖这些规则)。请参见fiddle。
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 存在问题),以及它们的好例子。
>
将选择最直接的子元素。我认为上面的例子可以通过展示多个直接子元素受到影响来改进。 - Govind Rai>
选择所有直接子元素空格选择器会选择所有深层后代,而大于号>
选择器只会选择所有直接后代。可以参考示例进行查看。
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>
>
组合器之间的区别。您可能希望给div>b
一个不同的颜色来更好地说明区别。 - BoltClock正如其他人所说,这是直接的子元素,但值得注意的是,这与只留下一个空格不同...一个空格适用于任何后代元素。
<div>
<span>Some text</span>
</div>
div>span
可以匹配这个,但无法匹配这个:
<div>
<p><span>Some text</span></p>
</div>
为了匹配那个,你可以使用 div>p>span
或者 div span
。这是一个子元素选择器。
当一个元素是某个元素的子元素时,它就会匹配。它由两个或多个选择器组成,用">"分隔。
例如:
以下规则设置所有BODY元素的子元素P元素的样式:
body > P { line-height: 1.3 }
div ol>li p
它匹配的是在LI元素下的后代P元素;LI元素必须是OL元素的子元素;OL元素必须是DIV元素的后代。注意,">"组合器周围的可选空格已被省略。
它声明了父级引用,在此页面查看定义: