CSS 예제 20 / 20
같은 요소에 여러 규칙이 충돌하면 브라우저는 특이도(specificity) 가 가장 높은 규칙을 선택합니다 — id > class > 태그 순서예요.
specificity
!important
cascade
💡 이렇게 바꿔보세요
- 특이도는 (id 개수, 클래스/속성/가상클래스 개수, 태그 개수) 순서로 비교해요 — 위에서부터 규칙을 하나씩 지워보며 색이 어떻게 바뀌는지 보세요
- 특이도가 같으면 CSS 파일에서 나중에 쓰인 규칙이 이겨요 (선언 순서)
!important 는 특이도 계산을 무시하고 항상 이기지만, 남발하면 나중에 아무도 못 덮어써서 유지보수가 힘들어져요
← CSS 예제 목록