Question

下面我对css的想法是：将所有img元素与包含值“left”和p元素的后代的class属性匹配。这是对的吗？

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

Answer 1

是的，这是完全正确的;您的选择器将match both img elements：

<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 Fiddle demo

这将与所包含的img中的span匹配。

同样，您只能匹配img中的span：

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

JS Fiddle demo

参考文献：

CSS Selectors, from the 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不匹配

后代选择器

2 个答案: