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> 

最初のリンクは、通常のサイトアイコンです。

2番目のリンクにはインデントと別のイメージが必要です。 3つ目のリンクには画像がなく、インデントされていないはずです。

これを動作させるために私ができることについて誰もが分かりますか？私は!importantを少し気にしていますが、これでうまくいくことがわかります。

a.icon

Answer 1

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