CSS selectors apply style to all images except the first one

问题

I thought I could do this with advanced CSS selectors, but struggling.

I have a JS Fiddle here with the below example

Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.

So something like .entry-content img:first-child (although I know that wouldn't work)

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

回答1:

If you want to select all img tags except first one use :not subclass:

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

Working example: http://jsfiddle.net/GrAaA/

Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child

回答2:

You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.

To do that, you can use this selector:

.entry-content div + div img

This selects the image in every div that comes directly after another div, so your first one won't be matched.

If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:

.entry-content div ~ div img

回答3:

apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.

回答4:

This should help

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

来源：https://stackoverflow.com/questions/12075655/css-selectors-apply-style-to-all-images-except-the-first-one

标签

css

css-selectors