CSS 선택기 특이성은 무엇이며 어떻게 작동합니까?

CSS의 선택기 특이성은 CSS 선택기가 HTML 요소를 대상으로 하는 방식에서 얼마나 구체적인지를 상대적으로 측정한 것입니다. DOM 트리의 지정된 요소에 대한 최종 CSS 속성 값을 결정하기 위해 Specificity 알고리즘에서 사용됩니다.

언제
요소의 특정 속성에 대해 서로 다른 CSS 선언에서 오는 경쟁 값이 있을 때 선택기 특정성이 컨텍스트에 나타납니다. 특이성 알고리즘은 중요 렌더링 경로의 CSSOM 트리 생성 단계에서 실행됩니다. 특이성 알고리즘을 적용하기 전에 브라우저는 구문 분석 중인 스타일시트에서 오는 CSS 규칙으로 구성된 HTML 노드 트리를 보유합니다. 또한 원본 및 레이어 우선 순위를 결정하기 위해 캐스케이드 알고리즘을 실행합니다. 그런 다음 브라우저는 CSSOM 트리의 각 노드를 순회하고 특이성 알고리즘을 적용하여 순회 중인 노드의 각 속성의 계산된 값을 구체화합니다.

어떻게
특이성 알고리즘은 3열 값 집합을 기반으로 CSS 선택기의 가중치를 계산합니다. 각 열은 구체적으로 요소를 대상으로 지정하는 방법 측면에서 선택기 범주를 나타냅니다.

예를 들어, 다음 규칙에 대한 특이성 가중치는 1-1-2입니다.

#example-div .some-class div a {
  color: white;
  background-color: blue;
}

ID 열이라고도 하는 첫 번째 열은 선택기에 사용된 값id의 수를 추적합니다. 두 번째 열은 클래스 열이라고 하며 선택기에 있는 클래스 및 의사 클래스의 총 수를 계산합니다. 세 번째 열은 유형 열이라고 하며 선택기에서 사용되는 요소 및 의사 요소의 수를 유지합니다. 이러한 열은 선택자 가중치 범주라고도 합니다.

ID 열이 가장 구체적이고 Class 열과 Type 열이 가장 구체적입니다.

지정된 CSS 선언에 대해 특이성 알고리즘은 각 가중치 범주에 속하는 총 선택기 수를 기준으로 각 열에 누적 값을 할당합니다.

위의 예에서 ID 선택자 1개, 클래스 선택자 1개, 유형 선택자 2개가 있으므로 특이성은 1-1-2입니다.

특이성 알고리즘은 CSS 스타일시트가 구문 분석될 때 모든 CSS 선언에 대한 특이성을 계산합니다. 통과한 노드에서 특정 속성에 대한 경쟁 값이 있을 때만 비교를 적용하고 해당 속성의 값을 업데이트한다는 점에 유의하는 것이 중요합니다.

다음 두 선언의 경우:

div a {
  background-color: black;
  border: 1px solid black;
}

#example-div .some-class div a {
  color: white;
  background-color: blue;
}

첫 번째 규칙의 특이성은 0-0-2입니다. 따라서 두 번째 규칙은 1-1-2가 있으므로 더 구체적입니다.

다음 섹션의 경우:

<section id="example-div">
  <div class="some-class">
    <div>
      <a href="#">Go to Google</a>
      <a href="#">Go somewhere out</a>
    </div>
  </div>
</section>

이 경우 background-color 값만 경쟁하기 때문에 링크는 파란색의 border-color와 검은색의 background-color를 갖게 됩니다.

따라서 특이성 알고리즘은 비교되는 선언이 다른 속성 값에만 특이성을 적용합니다.


참조

Specificity

Populating the page: how browsers work - Building the CSSOM

Cascading order