우선순위 문제는 실제로 충돌 해결 문제입니다. 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인 다른 스타일 스타일이 있으므로 항상 외부 정의보다 높습니다. 여기서 텍스트 내 스타일은