CSS繼承：有條件地刪除背景圖片

我的網站上的所有圖像都會自動在css旁邊顯示一個圖標（請參閱下面的代碼示例）。對於一些鏈接，我想刪除此圖標。對於一些鏈接，我想要有一個不同的圖標。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有點謹慎，但我知道這會使它工作。

來源

2011-10-18 sianabanana

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

參見：

Calculating a selector's specificity - w3.org

來源

2011-10-18 16:40:53

這正是我一直在尋找。我知道這是這樣的，但不知道要搜索什麼。非常感謝：） – sianabanana

CSS繼承：有條件地刪除背景圖片

回答

相關問題