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

可能重复：
“>”在CSS规则中意味着什么？

我已经看过几次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 {
    ...
}

你的规则只适用于那些拥有“中等”类别的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>

---

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

空间 选择器将选择所有深层的后代，而大于>选择器将只选择所有的直接后代。 以小提琴为例。

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>

---

这是CSS子选择器。 例：

div > p选择div的直接子元素的所有段落。

看到这个

链接地址: http://www.djcxy.com/p/3907.html

上一篇: CSS '>' selector; what is it?

下一篇: CSS selector for first element with class