CSS의 명시도 규칙

이전 예시에서 두 선택자는 동일했고 동일한 우선순위를 가졌습니다. 이는 더 아래에 작성된 속성이 적용됨을 의미합니다.

하나의 페이지 요소가 여러 선택자에 해당하는 상황도 있습니다. 이 경우 속성이 충돌할 때 더 명시적인, 즉 더 정확한 선택자가 승리합니다. 명시도 규칙을 살펴보겠습니다.

첫 번째 규칙

클래스는 항상 태그 선택자를 이깁니다:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* 이 색상이 적용됨 */
}

Результат:

두 번째 규칙

아이디는 항상 클래스를 이깁니다:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* 이 색상이 적용됨 */
}

Результат:

세 번째 규칙

동일한 조건에서는 구성 요소가 더 많은 선택자가 승리합니다. 예를 들어, 두 개의 태그 선택자가 있다면 태그가 더 많은 선택자가 승리합니다:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* 이 색상이 적용됨 */
}

Результат:

두 개의 클래스 선택자라면, 더 많은 클래스가 지정된 선택자가 승리합니다 (태그 선택자가 포함되어 있어도 영향이 없습니다):

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* 이 색상이 적용됨 */
}

Результат: