!important의 동작과 한계

개념 이해하기

!important는 같은 origin/layer에서 일반 선언보다 먼저 비교됩니다. 긴급한 덮어쓰기처럼 보이지만 재정의가 어려워지므로 외부 코드 제어 등 명확한 이유가 있을 때 제한적으로 사용합니다.

두 상자 모두 .target과 .stage .target에 걸리는데, 명시도가 더 높은 .stage .target이 배경을 노란색으로 바꿉니다. 그러나 color만은 .target 쪽 선언에 !important가 붙어 명시도와 상관없이 흰색이 이기므로, 노란 배경 위에 흰 글자가 얹혀 읽기 어려운 조합이 됩니다. background는 명시도대로, color는 !important대로 정해져 두 규칙이 속성별로 섞인 결과입니다.

!important 선언은 레이어와 출처의 우선순위를 뒤집습니다. 일반 선언은 나중에 선언한 cascade layer가 이기지만 !important끼리는 먼저 선언한 레이어가 이기고, 사용자가 브라우저에 설정한 !important 스타일은 웹사이트의 !important보다도 앞섭니다.