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

Question

我本以为可以通过高级CSS选择器来实现，但遇到了麻烦。

我有一个JS Fiddle 链接，里面有下面的示例：

基本上，如何只针对这里的每个图像，除第一个之外？ 我不想使用类或ID，我只想使用高级选择器，如果可能的话。

所以类似于 .entry-content img:not(: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>

- SparrwHawk

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

- Michael

---

太好了，这似乎是最干净的解决方案。感谢其他所有人的帮助。 - SparrwHawk

如果您关心浏览器支持，您仍然可以使用此方法，然后将 http://selectivizr.com/ 插入到您的项目中。 - Michael

Answer 2

您需要排除第一个 div 子元素中的图像，而不仅仅是第一个 img 子元素，因为每个 img 都是其 div 的第一个且唯一的子元素，而这些 div 元素本身是兄弟元素。

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

.entry-content div + div img

这个选择器选中的是在另一个 div 直接后面的每个 div 中的图像，因此您的第一个 div 将不会被匹配。

如果您在 .entry-content 中有除了 div 以外的兄弟元素，则可能需要使用一般兄弟选择器：

.entry-content div ~ div img

- BoltClock

---

嗨BoltClock，有没有办法使这更加健壮，因为插入一个段落会破坏它，例如http://jsfiddle.net/7HZEK/5/。 - SparrwHawk

@SparrwHawk：你可以使用~代替+，像这样：http://jsfiddle.net/BoltClock/7HZEK/6 我已经更新了我的答案。 - BoltClock

Answer 3

这应该会有所帮助

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

- Josh

Answer 4

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

- ksesh