CSS'>'选择器; 它是什么？

Question

可能重复:
CSS规则中的">"是什么意思？

我已经看过>几次在CSS代码中使用的"大于"(),但我无法弄清楚它的作用.它有什么作用？

Answer 1

> 选择直接的孩子

例如,如果你有这样的嵌套div:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

并在样式表中声明一个css规则,如下所示:

.outer > div {
    ...
}

您的规则将仅适用于具有"中间"类的div,因为这些div是具有"外部"类的元素的直接后代(直接子项)(当然,除非您声明覆盖这些规则的其他更具体的规则) .看小提琴.

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>

边注

相反,如果您 between selectors instead of >,则您的规则将适用于两个嵌套的div.这个空间更常用,并定义了一个"后代选择器",这意味着它在树下寻找任何匹配的元素,而不仅仅是直接的子元素>.

注意:>IE6不支持选择器.它确实适用于所有其他当前浏览器,包括IE7和IE8.

如果你正在寻找到使用的较差的CSS选择器,你可能也想看看+,~和[attr]选择,所有这些都可以是非常有用的.

此页面包含所有可用选择器的完整列表,以及它们在各种浏览器(主要是有问题的IE)中的支持细节,以及它们的使用示例.

Answer 2

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

空格 selector will select all deep descendants whereas a greater than >选择器将仅选择所有直接后代.比如小提琴.

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>

Answer 3

它是CSS子选择器.例:

div > p 选择div的直接子节点的所有段落.

看到这个

Answer 4

正如其他人所说,它是一个直接的孩子,但值得注意的是,这与仅留下空间不同......任何后代都有空间.

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

div>span会匹配这个,但它不符合这个:

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

为了匹配,你可以做div>p>span或div span.