CSS继承:有条件地删除背景图像

Question

我的网站上的所有图像都会在css旁边自动显示一个图标(参见下面的代码示例).对于某些链接,我想删除此图标.对于某些链接,我想要一个不同的图标.

所以我虽然css继承会这样做,但我似乎无法让它工作.

见例子.

a { background: url('http://www.veryicon.com/icon/preview/System/Icons%20for%20Developers/smiley%20Icon.jpg') no-repeat center left; padding-left: 50px; }
a.icon { background: auto; padding-left: 0px;}
.frown { background : url('http://www.talkparanormal.com/images/smilies/misc4/frown.jpg')  no-repeat center left; padding-left: 50px; }

<p><a href="#">test link</a></p>
<p><a href="#" tooltip="test icon" class="icon frown">test2</a></p>
<p><a href="#" tooltip="test icon" class="icon other">test2</a></p>

第一个链接是普通站点图标.

第二个链接应该有缩进和不同的图像.第三个链接应该没有图像,也没有缩进..

任何人都可以阐明我能做些什么才能让它发挥作用？我有点担心使用!important,但我知道这将使它工作.

Answer 1

a.icon具有更高的特异性.frown,

• a.icon 特异性= 0,0,1,1(11)
• .frown 特异性= 0,0,1,0(10)

...所以它的风格优先.增加特异性.frown应解决问题:

/* 0,0,1,1 - equal but declared after so takes precedence */
a.frown { background : url('http://www.talkparanormal.com/images/smilies/misc4/frown.jpg')  no-repeat center left; padding-left: 50px; }

/* 0,0,2,0 - greater and not reliant on position in the CSS */
.icon.frown { background : url('http://www.talkparanormal.com/images/smilies/misc4/frown.jpg')  no-repeat center left; padding-left: 50px; }

也可以看看:

• 计算选择器的特异性 - w3.org