css - 子孫セレクター

Question

以下のcssの私の考えは次のとおりです。すべてのimg要素を、値「left」とp要素の子孫を含むクラス属性と一致させます。あれは正しいですか？

p img.left  { float: left; margin: 0.9em 0.9em 0.9em 0; padding: 0; }

Answer 1

はい、それは完全に正しいです。セレクターは両方の要素に一致 imgします：

<p>
    <img class="left" src="http://lorempixel.com/200/200/nightlife" />
    <span><img class="left" src="http://lorempixel.com/300/300/nature" /></span>
</p>

タグの第1レベルimg.leftの子孫のみを選択する場合は、次のようにできます。p

p > img.left {
    /* CSS */
}

JSフィドルデモ。

これは、含まれている内とは一致しません。imgspan

同様に、 ：img内でのみ一致させることができます。span

p span img,
p span > img,
span img,
span > img {
    /* CSS */
}

JSフィドルデモ。

参照：

• W3CのCSSセレクター。

Answer 2

あなたは正しいです。

p img.left  {}

HTML：

<p>
   <img class="left" /> * MATCHES THIS *
   <img /> * NOT THIS *
</p>
<div>
   <img class="left" /> * NOT THIS *
   <img /> * NOT THIS *
</div>

<p>
    <img class="left" /> * MATCHES THIS *
    <img /> * NOT THIS *
    <span>
        <img class="left" /> * ALSO MATCHES THIS *
        <img /> * NOT THIS *
    </span>
</p>

それでそれは内部のそれの内部p > img.left {}と一致しませんimgdivp