css - 2个css选择器有什么区别（一个使用>，一个不使用）

Question

我一直想知道这两个选择器之间有什么区别：

#someID img

和

#someID > img

他们两个都在影响img里面的标签#someID。

知道它们之间有什么区别吗？

Answer 1

>表示立即嵌套。是的img直系子级#someID。第一个选择器将影响. 第二个只会影响直系子女。#someID

Answer 2

#someID img将选择imgid 为的元素下的任何元素#someID。

<div id="someID">
    <img href="#" /><!-- selects this element -->
    <div>
        <img href="#" /><!-- also selects this element -->
    </div>
</div>

#someID > img只会选择imgid 为 的元素正下方的元素#someID。

<div id="someID">
    <img href="#" /><!-- selects this element -->
    <div>
        <img href="#" /><!-- doesn't select this element -->
    </div>
</div>

Answer 3

>是直接子选择器。

JSFiddle 演示

举个例子：

CSS

#wrapper > .one { border:10px solid red; }
.one { height:100px; width:100px; padding:20px; margin:50px; border:5px solid orange;}

HTML：

<div id="wrapper">
    <div class="one">
            <div class="one"></div>
    </div>
</div>

只有.one直接下的 div#wrapper才会得到红色边框。

Answer 4

第二个仅匹配 ifimg的直接后代#someID，其中第一个不关心。

说明性示例：

<div id="someID">
  <img .../> <!-- both "#someID img" & "#someID > img" -->
  <div>
    <img .../> <!-- only "#someID img" -->
  </div>
</div>