CSS .addClass가 특수성별로 적절한 스타일을 적용하지 않는 이유는 무엇입니까?

Question

나는 css 특이성의 개념을 이해한다. 여기 내 상황은 다음과 같습니다.

"성공"이라는 클래스 스타일이 있습니다. 이것은 단순히 녹색을 녹색으로 만듭니다. 이제는 .success를 정의하는 두 개의 개별 CSS 파일 (다른 스타일을 정의 함)이 있습니다. 이러한 Site.css 및 Page.css를 호출 해 보겠습니다.

Site.css의 클래스는 단순히 :

.success { color: green; } 

Page.css의 클래스는 더 지정됩니다

이

#MainRegion div .resultPanel .success { background-color: green; } 

지금 자바 스크립트 (jQuery를 사용하여), 내가 좋아하는 클래스를 추가 그래서 :이 브라우저 디버거 (F12)를 사용하여 검사 할 때

이제

$("#MainRegion div .resultPanel").addClass("success"); 

, 나는 Site.css 스타일 앱 것을 볼 수 있습니다 거짓말 (Page.css보다는). 나는 Page.css에 정의 된 클래스가 더 구체적이기 때문에 이것이 호출되어야한다고 생각했다. 나는 CSS의 특이성이 어떻게 작용하는지에 대한 나의 이해에 대해 뭔가를 놓쳤는가?

Answer 1

누락되었습니다. 코드 행은

$("#MainRegion div .resultPanel").addClass("success"); 

반환

#MainRegion div .resultPanel.success 

<div class="resultPanel success"></div> 

및

#MainRegion div .resultPanel .success 

<div class="resultPanel"> 
    <div class="success"></div> 
</div> 

그래서 당신은 당신이 당신의 CSS 나 JS을 변경할 수 있습니다하려는 작업에 따라하는 것은 올바른 요소를 대상으로하지

귀하의 CSS가

인 경우 솔직히 당신은 아마 당신의 스타일 시트 중 하나에서 성공을위한 다른 클래스를 만들어야합니다

Answer 2

을 예상대로3210

#MainRegion div .resultPanel.success { background-color: green; } 

다음 JS 작동합니다. 내가 올바르게 이해한다면 당신은 초록색 글꼴 색으로 초록색 BG를 갖게 될 것입니다. 스타일 시트는 두 호출에 대해 서로 다른 것을 정의하고 있기 때문에 함께 작동해야하지만 이는 모범 사례가 아닙니다.