ID的CSS停用

Question

A hopefully quick css question for you.

Throughout the bulk of my site I have added images in with text and given them a 10px padding along the top to make it look better, like this:

#zzmainContent img {padding-top: 10px;}

Now I want to add the vary occasional image, within the same < DIV>, but I don't want the padding to take effect. I've created a new ID:

#icon {padding-top: -10px; vertical-align: middle;}

But it still wants to add the padding as it is still an < img>. How can I 'opt-out' my icon id?

Thanks, Chris.

Answer 1

First, if you have multiple icons within #zzmainContent you should use a class instead of an id.

If your #icon rule comes after the img rules, add !important and see if that helps.

Id-based rule:

#icon {padding-top: -10px !important; vertical-align: middle !important;}

Class-based rule:

.icon {padding-top: -10px !important; vertical-align: middle !important;}

These rules both assume that the id or class is an attribute on the image itself.