CSS'>'选择器它是什么？ [英] CSS '>' selector; what is it?

问题描述

可能重复：

在CSS规则中>是什么意思？

我看过在CSS代码中使用了大于（> ）几次，但我不能解决它的作用。

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?

推荐答案

> h2>

例如，如果你有如下嵌套的div：

> 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>

，并在样式表中声明一个css规则，例如：

and you declare a css rule in your stylesheet like such:

.outer > div {
    ...
}

您的规则将仅适用于因为这些div是具有类outer的元素的直接后代（直接子元素）（除非你声明其他更具体的规则覆盖这些规则）。请参阅fiddle。

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>

如果你在选择器之间有一个空格 ，而不是> ，您的规则将应用于两个嵌套的div。该空间是更常用的，并定义了一个后代选择器，这意味着它寻找任何匹配的元素，而不是直接的孩子，如> 。

If you, instead, had a space between selectors instead of >, 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.

注意：IE6不支持> 选择器。它在所有其他当前的浏览器，包括IE7和IE8工作。

NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.

如果你正在寻找不太好的CSS选择器，你可能还要看 + ，〜和 [attr] 所有这些都非常有用。

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.

此页有所有可用的选择器的完整列表，以及它们在各种浏览器（其主要是IE有问题）中的支持的详细信息，以及它们的使用的良好示例。

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屋！