ToggleClass가 제대로 작동하지 않습니다.

Question

토글 클래스가 작동하지 않는 이유는 무엇입니까?

http://jsfiddle.net/xH8ME/1/

합니다 (toggleclass() 나던 작업,하지만 작동합니다) 토글 클래스가 제대로 작동

Answer 1

처럼 CSS 클래스를 더 구체적으로해야하지만, 스타일이 오버라이드 (override) 얻고있다. 이와

시도 :

.warnings_receiver_highlight { 
    background: #000 !important; 
    color: #000 !important; 
} 

데모 : //coding.smashingmagazine : http://jsfiddle.net/xH8ME/3/ 나는 코드가 제대로 작동 생각

Answer 2

은 내가 기본적으로 여기 http://jsfiddle.net/xH8ME/2/

을 수정 된 바이올린이 엉망 당신의 CSS입니다 아래에 정의 된 두 가지 클래스가 있습니다. div가 두 클래스를 모두 가지고 있기 때문에 브라우저는 어떤 배경을 적용해야하는지 어떻게 알 수 있습니까? .userGridViewItem은 배경색을 가져 오는 클래스 인 요소에서 먼저 정의되기 때문에. 이 일을하려면 제대로은 속성의 끝에서 !important를 사용하거나 일하고 div.warnings_receiver_highlight 또는 .userGridViewItem.warnings_receiver_highlight

.warnings_receiver_highlight{ 
    background: #000; 
    color: #000; 
} 
.userGridViewItem{ 
    background: brown; 
    color: #fff; 
    width: 200px; 
    height: 100px; 
} 

Answer 3

, 당신은 단지 CSS 특이성 (HTTP에 문제가있을 것 같다. com/2007/07/27/css-specificity-things-you-should-know /)를 사용하십시오. 하나 개의 솔루션은 내가 당신이 원하는 것을 이해하고 있습니다 경우 .warnings_receiver_highlight

Answer 4

에서 속성에 !important를 추가하는 것입니다, 당신이해야합니다 모든 userGridViewItem에 대한 당신의 스타일 후 warnings_receiver_highlight에 대한 CSS에서 스타일을 장소입니다.

Answer 5

마지막으로 원하는 덮어 쓰기를 배치하십시오. 또한 스타일에 중요한 것은 적용 할 수 있지만, 다른 것이 주어지면 중요도가 높아 지도록 보장 할 수 있습니다. 귀하의 바이올린 페이지에는 또한 여분의 }이 끝에 있습니다.

.userGridViewItem{ 
    background: brown; 
    color: #fff; 
    width: 200px; 
    height: 100px; 
} 
.warningYellow{ 
    border: 3px solid yellow; 
} 
.warnings_receiver_highlight{ 
    background: #000 !important; 
    color: #000 !important; 
}