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

은 참조 :

• Calculating a selector's specificity - w3.org