CSS '>'选择器；它是什么?
[英] CSS '>' selector; what is it?
本文介绍了CSS '>'选择器；它是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我见过几次 CSS 代码中使用的大于"(>)，但我不知道它的作用.它有什么作用?
解决方案
> 选择直接孩子
例如，如果您有这样的嵌套 div:
<div class="middle"><div class="inner">...</div>
<div class="middle"><div class="inner">...</div>
然后在样式表中声明一个 css 规则，如下所示:
.outer >div {...}
您的规则仅适用于具有中间"类的那些 div，因为这些 div 是具有外部"类的元素的直接后代(直接子代)(当然，除非您声明其他更具体的规则覆盖这些规则).见小提琴.
div {边框:1px纯黑色；填充:10px；}.外>div {边框:1px纯橙色；}
div.outer - 这是父级.<div class="middle">div.middle - 这是外部"的直接子代.这将收到橙色边框.<div class="inner">div.inner - 这是middle"的直接子代.这将不会收到橙色边框.</div>
<div class="middle">div.middle - 这是外部"的直接子代.这将收到橙色边框.<div class="inner">div.inner - 这是middle"的直接子代.这将不会收到橙色边框.</div>
<p>没有文字</p><div class='outer'><div class="middle"><div class="inner">...</div>
<div class="middle"><div class="inner">...</div>
附注
如果您在选择器之间使用空格 >，则您的规则将适用于两个嵌套的 div.这个空间更常用，它定义了一个后代选择器"，这意味着它会在树中查找任何匹配的元素，而不仅仅是像 > 那样的直接子元素.
注意:IE6 不支持 > 选择器.不过，它确实适用于所有其他当前浏览器，包括 IE7 和 IE8.
如果您正在研究不太常用的 CSS 选择器，您可能还想查看 +、~ 和 [attr] 选择器，所有这些都非常有用.
这个页面 有所有可用选择器的完整列表，以及它们在各种浏览器中的支持细节(它的主要是有问题的 IE)，以及它们使用的好例子.
I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?
解决方案
> selects immediate children
For example, if you have nested divs like such:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
and you declare a css rule in your stylesheet like such:
.outer > div {
...
}
your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See 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>
Side note
If you, instead, had a space >, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the > does.
NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
If you're looking into less-well-used CSS selectors, you may also want to look at +, ~, and [attr] selectors, all of which can be very useful.
This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
这篇关于CSS '>'选择器；它是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
