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; } .ab { 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的直接子元素的所有段落。
看到这个
正如其他人所说，这是一个直接的孩子，但值得注意的是，这是不同的，只是离开一个空间…一个空间是任何后代。
<div> <span>Some text</span> </div>
div>span将匹配这个，但它不会匹配这个：
<div> <p><span>Some text</span></p> </div>
要做到这一点，你可以做div>p>span或div span 。
这是一个儿童选择器。
它匹配元素是某个元素的子元素。 它由两个或多个由“>”分隔的选择器组成。
例子）：
以下规则设置了BODY的所有P元素的风格：
body > P { line-height: 1.3 }
例子）：
以下示例结合了后代选择器和子选择器：
div ol>li p
它匹配一个LI的后代的P元素; LI元素必须是OL元素的孩子; OL元素必须是DIV的后代。 请注意，“>”组合器周围的可选空白已被省略。
它声明父引用，看这个页面的定义：
这意味着父母/孩子
例：
HTML>体
这是说，身体是HTML的孩子
退房： 选择器
