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>

如果您只想选择标签的第一级img.left后代，您可以：p

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

JS 小提琴演示。

这将不匹配img包含的span.

同样，您只能匹配img:span

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

JS 小提琴演示。

参考：

• CSS 选择器，来自 W3C。

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 {}它就不会匹配img里面的div东西里面的东西p