CSS 선택기 특정성과 우선순위

여러 CSS 선택기가 단일 요소에 적용되는 경우 브라우저는 어떤 선택기가 우선할지 결정해야 합니다. 이를 선택기 특이성이라고 합니다.

선택기 특이성을 결정하는 규칙:

1. !중요하고 인라인 스타일 재정의:

   • !important 플래그로 선언되거나 스타일 속성을 사용하여 인라인으로 선언된 스타일 우선순위가 가장 높습니다.

2. 특정성:

   • 선택자의 특이성은 숫자에 의해 결정됩니다. 및 해당 구성 요소 유형:

     • #id는 다음보다 특이성이 높습니다. .classname
     • .classname는 태그 이름

3. 마지막 규칙 우선 적용:

   • 두 선택기의 구체성이 동일한 경우 CSS 파일에서 마지막으로 선언된 선택기가 우선합니다.

예:

다음 CSS를 고려하세요. 규칙:

body { font-size: 14px; }
#header { font-size: 16px; }

요소에는 두 규칙이 모두 적용됩니다. 그러나 #header 선택기는 더 높은 구체성(#id > 태그 이름)을 가지므로 해당 글꼴 크기 값 16px가

요소에 적용됩니다.

참고:

동일한 요소를 서로 다른 수준의 구체성으로 타겟팅하는 여러 규칙을 갖는 것은 드문 일이 아닙니다. 이는 특정 사례에 대한 스타일을 개선하거나 특정 인스턴스에 대한 전역 규칙을 재정의하는 데 사용할 수 있습니다.