我见过“大于”(>
) 在 CSS 代码中使用了几次,但我不知道它的作用。它有什么作用?
>
选择直接子代
例如,如果您有这样的嵌套 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。该空间更常用,它定义了一个“后代选择器”,这意味着它会在树中查找任何匹配的元素,而不仅仅是直接子元素作为>
does.
注意:>
IE6 不支持选择器。但它确实适用于所有其他当前浏览器,包括 IE7 和 IE8。
如果您正在研究不太常用的 CSS 选择器,您可能还想看看+
, ~
, and [attr]
选择器,所有这些都非常有用。
这一页 http://www.quirksmode.org/css/selectors/有所有可用选择器的完整列表,以及它们在各种浏览器中的支持详细信息(主要是有问题的 IE),以及它们的使用示例。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)