CSS 클래스의 우선 순위

Question

나는 <span class="tag invalid_tag">abc</span>처럼 2 개의 클래스가있는 범위가 있습니다. jQuery를 통해 두 번째 클래스를 올바르게 추가하고 실제로 제거하지 않고 두 번째 클래스의 속성을 먼저 재정의해야합니다. 예를 들어, 속성은 글꼴 색과 배경색입니다. 일반적으로 태그는 녹색이지만 클래스 "invalid_tag"를 추가하면 빨간색으로 바뀌지 만 첫 번째 클래스가 우선 순위를 가지기 때문에 그렇지 않습니다. 이 우선 순위를 변경하는 방법을 알고 싶습니다. 또는 다른 방법으로이를 달성 할 수 있는지 알고 싶습니다.

Answer 1

CSS 선언의 우선 순위는 CSS의 순서 (나중 선언이 이전 선언보다 우선 함)와 특수성 (보다 구체적인 선언은 덜 구체적인 선언보다 우선 함)을 따릅니다. (이 속성에는 클래스 이름을 지정하는 순서와는 아무런 관련이 없습니다.) Section 6의 상세 정보.

다음은 주문 예입니다. 이 HTML과 CSS이

.foo { 
    color: red; 
} 
.bar { 
    color: blue; 
} 

는 두 개의 파란색 단락

<p class="foo bar">Hi there</p> 
<p class="bar foo">Hi again</p> 

... 결과, 두 번째 선언은 첫 번째보다 우선하기 때문이다. (Live example) 두 신고 모두 동일한 특이성을 가지고 있기 때문에 이런 일이 발생합니다.

여기 특이성의 데모입니다 :

p.foo가 선택 .bar보다 더 구체적이다 선택하기 때문에 두 빨간색 단락에서 같은 HTML 결과에

p.foo { 
    color: red; 
} 
.bar { 
    color: blue; 
} 

이 CSS ..., CSS의 초기 버전 일지라도 우선 순위가 있습니다. (Live example)