10

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

我在这里有一个 JS Fiddle和下面的例子

基本上，我怎样才能在这里定位每张图片，除了第一个？我不想使用类或 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>
4

4 回答 4

18

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

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


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


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

于 2012-08-22T14:52:03.507 回答
6

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

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

.entry-content div + div img

这会选择每个div紧随其后的图像div，因此不会匹配您的第一个图像。

如果您有其他兄弟姐妹div，.entry-content则可能需要使用通用兄弟姐妹选择器：

.entry-content div ~ div img
于 2012-08-22T14:44:57.120 回答
0

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

于 2012-08-22T14:47:59.130 回答
0

这应该有帮助

.entry-content div:first-child img {
     border: none;
}​
于 2012-08-22T14:49:56.290 回答