2 个 css 选择器有什么区别(一个使用 >，一个不使用)

Question

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

#someID img

和

#someID > img

两者都在影响CCD_ 2内部的CCD_ 1标签。

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

Answer 1

>表示立即嵌套。img是#someID的直接子级。第一个选择器将影响#someID中任何位置的所有图像。第二种只影响的直系亲属。

Answer 2

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

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

CCD_ 10将仅选择id为img2的元素正下方的CCD_。

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

Answer 3

只有当img是#someID的直接后代时，第二个才匹配，其中第一个不在乎。

示例：

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

Answer 4

>是一个直接的子选择器。

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>

只有#wrapper正下方的.onediv才会获得红色边框。