여러 규칙이 한 요소를 스타일링할 수 있을 때, 두 가지 메커니즘이 결과를 결정합니다: cascade(어느 규칙이 이기는지)와 상속(부모에서 어떤 속성이 내려오는지).
브라우저는 우선순위 순서로 다음을 확인해 이기는 선언을 고릅니다.
1. 중요도(Importance) → !important가 일반 선언을 이김
2. specificity → 더 구체적인 selector가 이김 (id > 클래스 > 요소)
3. 소스 순서 → 그래도 동점이면, 마지막에 정의된 규칙이 이김
{ : blue; }
{ : green; }
{ : red; }
특정 속성(대부분 텍스트 관련)은 자손에게 자동으로 상속되고, 대부분은 그렇지 않습니다.
body {
color: #333; /* ✅ 상속됨 — 모든 텍스트 자손이 받음 */
font-family: serif; /* ✅ 상속됨 */
border: 1px solid; /* ❌ 상속 안 됨 — 자식은 border를 받지 않음 */
}
기본적으로 상속됨: color, font-*, line-height, text-align, visibility, cursor. 상속 안 됨: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* 부모의 값을 강제로 가져옴 */
border: initial; /* 속성의 기본값으로 리셋 */
all: unset; /* 전부 리셋: 상속 가능하면 inherit, 아니면 initial */
}
이것이 낮은 specificity 규칙이 나중에 작성되어도 질 수 있는 이유입니다 — specificity가 소스 순서보다 먼저 확인됩니다. 순서(중요도 → specificity → 소스 순서)를 이해하면 거의 모든 "내 스타일이 적용 안 돼" 경우가 설명됩니다.
cascade와 상속은 CSS가 실제로 어떻게 해결되는지에 대한 핵심 모델입니다.
우선순위 순서를 알면 충돌을 디버깅하고, 어떤 속성이 상속되는지 알면 곳곳이 아니라 body에 color/font를 한 번만 설정할 수 있으며, inherit/initial/unset은 정밀한 제어를 줍니다 — 이들이 함께 CSS를 마법이 아닌 예측 가능한 것으로 만듭니다.