css - 2 つの CSS セレクターの違いは何ですか (1 つは > を使用し、もう 1 つは使用していません)。

Question

これらの 2 つのセレクターの違いは何なのか、いつも疑問に思っていました。

#someID img

と

#someID > img

どちらも の中にあるimgタグに影響を与えています#someID。

それらの違いは何ですか？

Answer 1

#someID imgimgの id を持つ要素の下にある任意の要素を選択します#someID。

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

#someID > imgimgの id を持つ要素の直下にある要素のみを選択します#someID。

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

Answer 2

は、>即時のネスティングを示します。はのimg直接の子です#someID。最初のセレクターは、内のすべての画像に影響します#someID。2 番目は、直系の子のみに影響します。

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

img2 番目は が の直接の子孫である場合にのみ一致しますが#someID、最初の as は気にしません。

実例:

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