우선순위 문제는 실제로 충돌 해결 문제입니다. CSS 선택기로 동일한 요소(또는 콘텐츠)를 선택하면 우선순위에 따라 다른 CSS 규칙을 선택해야 합니다.
첫 번째는 CSS 규칙의 특수성입니다. CSS2.1에는 4자리 숫자 문자열(CSS2는 3자리)로 표시되는 일련의 특수성 계산 방법이 있습니다. 특별 규칙에서는 판단을 내릴 때 더 유리할 것입니다. 특정 특정 계산과 관련하여 다양한 상황에서 숫자 추가에 대한 다음과 같은 일반 규칙이 있습니다.
각 ID 선택자(#someid)에 대해 0,1,0,0을 추가합니다.
각 클래스 선택기(.someclass), 각 속성 선택기([attr=""] 등으로 구성), 각 의사 클래스(hover 등으로 구성)는
각 요소에 0, 0, 1, 0을 추가합니다. 의사 요소(:firstchild) 등에는 0,0,0,1을 추가합니다
. 다른 선택기에는 전역 선택기인 *, 0,0,0,0을 추가합니다. 추가하지 않는 것과 동일하지만 이는 일종의 특이성이기도 하며 이에 대해서는 나중에 설명하겠습니다.
이러한 규칙에 따라 숫자열을 비트 단위로 추가하여 최종적으로 계산된 특이도를 얻은 후, 비교 선택 시 왼쪽에서 오른쪽으로 비트 단위로 비교하게 됩니다.
몇 가지 예를 들어보겠습니다:
h1 {색상: 빨간색;}
/* 일반 요소 보너스는 하나만 있으며 결과는 0,0,0,1입니다. */
몸체 h1 {색상: 녹색;}
/* 두 개의 일반 요소를 추가하면 결과는 0,0,0,2입니다 */
--후자가
h2.grape {color: purple;}
을 얻습니다.
/* 일반 요소와 클래스 선택자를 추가하면 결과는 0,0,1,1*/
h2 {색상: 은색;}
/*일반 요소, 결과는 0,0,0,1 */
--전자가 승리합니다
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7개의 일반 요소, 하나의 속성 선택자, 두 개의 다른 선택자, 결과는 0,0,1,7입니다 */
li#answer {색상: 네이비;}
/* ID 선택자, 일반 선택자, 결과는 0,1,0,1 */
--후자가 승리한다
구체성 외에도
규칙 텍스트에는 우선순위가 1,0,0,0인 다른 스타일 스타일이 있으므로 항상 외부 정의보다 높습니다. 여기서 텍스트 내 스타일은 <div style="color: red">blah</div>와 같은 스타일을 참조하고, 외부 정의는 <link> 또는 <style> 태그를 통해 정의된 규칙을 참조합니다.
무엇보다도 중요한 선언 규칙이 있습니다.
!important 선언이 충돌하는 경우 우선순위가 비교됩니다.
우선순위가 동일할 경우 소스 코드에 나타나는 순서대로 결정되며 나중 우선순위가 우선 적용됩니다.
상속에서 파생된 스타일에는 다른 모든 규칙(예: 전역 선택기 *에 의해 정의된 규칙)보다 낮은 특정성 계산이 없습니다.
@import를 통해 로드된 외부 스타일과 관련하여 @import는 다른 모든 규칙 정의보다 먼저 나타나야 하므로(그렇지 않은 경우 브라우저는 이를 무시해야 함) 후순위 우선 원칙에 따라 일반적으로 우선순위 충돌이 우선합니다.
여기서 IE는 @import를 잘못된 위치에서 인식할 수 있지만 @import가 어디에 있든 이를 다른 모든 규칙 정의보다 먼저 간주하므로 오해가 발생할 수 있다는 점을 언급해야 합니다.
따라서 우선순위 문제는 단순해 보이지만 그 이면에는 여전히 상당히 복잡한 메커니즘이 존재하므로 더 많은 주의가 필요합니다.