2011-02-22 5 views
0

내비게이션을 만들고 있습니다.
는 여기가 버튼을 선택하면, 나는 그 버튼의 배경 색상이 다른 사람과 호버 같은 다른 색상을 유지 희망 CSS 스타일Jquery addclass(), 클래스 충돌과 관련된 작업

a:link.navA, a:visited.navA 
{ 
    display:block; 
    width:120px; 
    color:#FFFFFF; 
    background-color:#003366; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    font-family:Calibri; 
} 
a:hover.navA 
{ 
    background-color:#336699; 
} 
.selected 
{ 
    background-color:#336699; 
} 

입니다. addclass("selected")을 사용하면 선택한 단추가 색상을 변경하지 않습니다. 나는 그것이 두 클래스 "navA"와 "selected"를 가질 것이기 때문에 그것이 둘 다 배경색을 정의한다고 생각합니다. 내 질문은 선택한 클래스 승리하는 방법입니다. 감사합니다.

답변

2

추가 할 수있는 중요한

.selected { 
    background-color:#336699 !important; 
} 

이이 규칙은 다른 사람을 무시하게됩니다. 그러나, 더 나은 CSS를 작성했다면 더 좋을 것입니다. 당신이 .navA 및 .selected 모두있는 버튼에 대해 다른 BG 색상을 갖고 싶어

편집

예를 들어, 당신은 당신이 갖는이

.navA.selected { 
    background-color:#336699; 
} 

처럼 CSS 쓸 수 있습니다 브라우저에 navA 클래스가 선택된 모든 항목에 다른 bg가 있어야 함을 알릴 수 있습니다. 이렇게하면! important를 추가 할 필요가 없습니다. 또한 요소에 두 클래스가 모두 적용된 경우에만 작동합니다.

+0

힌트를 제공해 주시겠습니까? link.navA와 같은 큰 클래스를 많은 작은 클래스로 나눌 수 있다는 것을 의미합니까? 그런 다음 요소에 여러 클래스를 추가 하시겠습니까? – Yao

+0

내가 말한 것은 CSS를 타겟팅하여 쉽게 수정할 수 있다는 것입니다. User Capsule의 링크는 좋은 예입니다. http://htmldog.com/guides/cssadvanced/specificity/ – JohnP

+0

내가 볼 수 있도록 내 대답에 예제를 추가했습니다. – JohnP