Question

我认为我可以使用高级CSS选择器做到这一点，但很难挣扎。

我有一个JS小提琴here，下面的例子是

基本上，我如何定位这里的每张图片，除了第一张图片？我不想使用类或ID，我只想使用高级选择器。

类似于.entry-content img：first-child（虽然我知道这不起作用）

<div class='entry-content'>
    <div>
        <img src='http://placedog.com/400/300'/>
    </div>
    <div>
        <img src='http://placedog.com/400/300'/>
    </div>        
     <div>
        <img src='http://placedog.com/400/300'/>
    </div>
</div>

Answer 1

如果要选择除第一个之外的所有img标签，请使用:not子类：

.entry-content div:not(:first-child) img

工作范例： http://jsfiddle.net/GrAaA/

浏览器支持：
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child

Answer 2

您需要在第一个div子项中排除该图像，而不仅仅是第一个img子项，因为每个img是其div的第一个也是唯一的子项{{ 1}}而div元素本身就是兄弟姐妹。

为此，您可以使用此选择器：

.entry-content div + div img

这会选择直接来自另一个div之后的每个div中的图片，因此您的第一张图片将不会匹配。

如果您在div内有.entry-content以外的兄弟姐妹，则可能需要使用通用兄弟选择器：

.entry-content div ~ div img

Answer 3

将样式应用于所有图像。然后将样式应用于第一个否定其他样式的子项。确保第一个子项的样式位于样式表中其他图像的样式之后，以便浏览器以正确的顺序应用它们。

Answer 4

这应该有帮助

.entry-content div:first-child img {
     border: none;
}

CSS选择器将样式应用于除第一个之外的所有图像

4 个答案: