CSS의 명시도 규칙

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

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

첫 번째 규칙

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

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

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

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

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

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

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

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

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

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

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

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