특이성이란?

두 개 이상의 CSS규칙이 동일한 요소를 가리키는데 충돌하는 경우, 브라우저는 어떤 규칙이 가장 구체적인지 결정한 다음 해당 규칙을 따릅니다.

특이성은 요소에 궁극적으로 적용되는 스타일 선언을 결정하는 점수/순위로 생각하십시오.

범용 선택기 (*)는 특이성이 낮고 ID 선택기는 매우 특이합니다!

** 특이성은 CSS 규칙이 일부 요소에 적용되지 않는 일반적인 이유입니다.

특이성 계층 구조 

모든 선택자는 특이성 계층에서 자신의 자리를 차지합니다. 선택기의 특이성 수준을 정의하는 네 가지 범주가 있습니다.

Inline styles - 인라인 스타일은 스타일을 적용 할 요소에 직접 첨부됩니다. 예 : <h1 style = "color : #ffffff;">.

IDs - ID는 #navbar와 같은 페이지 요소의 고유 식별자입니다.

Classes, attributes and pseudo-classes - 이 범주에는 .class, [attributes] 및 :hover, :focus 등과 같은 가상 클래스가 포함됩니다.

Elements and pseudo-elements - 이 카테고리에는 h1, div, :before 및 :after와 같은 요소 이름 및 가상 요소가 포함됩니다.

특이성을 계산하는 방법? 

특이성을 계산하는 방법을 암기하십시오!

0에서 시작하여 스타일 속성에 1000을 추가하고 각 ID에 100을 더하거나 각 속성, 클래스 또는 의사 클래스에 10을 더하거나 각 요소 이름 또는 유사 요소에 1을 더하십시오.

다음과 같은 세 가지 코드 조각을 고려하십시오.

• A: h1 
• B: #content h1 
• C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

A의 특이성은 1 (1 요소)

B의 특이성은 101 (하나의 ID 참조와 하나의 요소)

C의 특이성은 1000 (인라인 스타일링)

1 <101 <1000이므로 세 번째 규칙 (C)은 더 높은 특이성 수준을 가지므로 적용됩니다.

특이성 규칙 

동일한 특이성 : 최신 규칙 수 - 동일한 규칙이 외부 스타일 시트에 두 번 쓰여지는 경우, 스타일 시트의 하단 규칙은 스타일을 적용 할 요소에 더 가깝기 때문에 적용됩니다.

h1 {background-color: yellow;}
h1 {background-color: red;}

후자의 규칙이 항상 적용됩니다.

ID 선택자는 속성 선택 자보다 높은 특이성을 가집니다. - 다음 세 코드 행을 살펴보십시오.

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

첫 번째 규칙은 다른 두 규칙보다 구체적이며 적용됩니다.

문맥 선택기는 단일 요소 선택기보다 더 구체적입니다. - 포함 된 스타일 시트는 스타일을 적용 할 요소에 더 가깝습니다.

From external CSS file:

#content h1 {background-color: red;}

In HTML file:

<style>

#content h1 {

  background-color: yellow;

}

</style>

후자의 규칙이 적용됩니다.

클래스 선택자는 어떤 수의 요소 선택자보다 우위에 있습니다. - .intro와 같은 클래스 선택기는 h1, p, div 등을 상쇄합니다.

.intro {background-color: yellow;}
h1 {background-color: red;}

보편적인 선택자와 상속 된 값은 0 - *, body * 등의 특이성을 가지므로 0 특이성을 갖습니다. 상속 된 값의 특이성 값은 0입니다.