CSS 특异性

특异性는 무엇인가요?

동일한 요소에 대한 두 개 이상의 충돌 CSS 규칙이 있으면, 브라우저는 가장 구체적인 규칙을 따르고 따라서 승리하게 됩니다.

특异性(specificity)를 점수/등급으로 볼 때, 어떤 스타일 선언이 요소에 적용될지 결정할 수 있습니다.

일반 선택자(*)는 특异性가 낮지만, ID 선택자는 높은 특异性를 가집니다!

주의:이 특异性는 CSS 규칙이 일부 요소에 적용되지 않는 일반적인 이유입니다. 그러나 적용되어야 할 것이라고 생각할 수도 있습니다.

특성 계층

각 선택자는 특성 계층 구조에서 자신의 위치가 있습니다. 다음 네 가지 카테고리는 선택자의 특성 수준을 정의합니다:

라인(인라인) 스타일 - 라인(인라인) 스타일은 설정할 스타일의 요소에 직접 추가됩니다. 예시: <h1 style="color: #ffffff;">.

ID - ID는 페이지 요소의 유일한 식별자입니다. 예를 들어 #navbar.

클래스, 속성 및 피seudo-class - 이 카테고리는 .classes, [attributes] 및 피seudo-class을 포함합니다. 예를 들어 :hover, :focus 등.

요소와 피seudo-element - 이 카테고리는 요소 이름과 피seudo-element을 포함합니다. 예를 들어 h1, div, :before, :after 등.

특성을 어떻게 계산하나요?

특성 계산 방법을 기억해 주세요!

0부터 시작하여 style 속성에 1000을 추가하고, 각 ID에 100을 추가하고, 각 속성, 클래스 또는 피seudo-class에 10을 추가하고, 각 요소 이름 또는 피seudo-element에 1을 추가하세요.

다음 세 개의 코드 부분을 생각해 보세요:

예제

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A의 특성은 1(한 개의 요소)
  • B의 특성은 101(한 개의 ID 참조 및 한 개의 요소)
  • C의 특성은 1000(라인 인라인 스타일)

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

특성 규칙 1:

특성이 같은 경우: 최신 규칙이 중요합니다 - 같은 규칙을 외부 스타일 시트에 두 번 쓰면 스타일 시트의 마지막 규칙이 설정할 스타일의 요소에 더 가깝기 때문에 적용됩니다:

예제

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

직접 시도해 보세요

다음 규칙은 항상 적용됩니다.

특성 규칙 2:

ID 선택자는 속성 선택자보다 더 높은 특성을 가집니다 - 다음 세 줄 코드를 보세요:

예제

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

직접 시도해 보세요

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

특성 규칙 3:

컨텍스트 선택자는 단일 요소 선택자보다 더 구체적입니다 - 내장 스타일 시트는 설정할 스타일의 요소에 더 가깝습니다. 따라서 다음과 같은 경우:

예제

외부 CSS 파일에서 가져옴:

#content h1 {background-color: red;}

HTML 파일에서:

<style>
#content h1 {
  background-color: yellow;
}
</style>

적용됩니다.

특성 규칙 4:

클래스 선택자는 어떤 수의 요소 선택자를 이겨납니다 - 클래스 선택자(예: .intro는 h1, p, div 등의 요소 선택자를 이겨납니다):

예제

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

직접 시도해 보세요

또한,일반 선택자 및 상속된 값은 특성 0을 가집니다 - *의 특성, body * 및 유사한 것은 특성 0을 가집니다. 상속된 값의 특성도 0입니다.