!important가 cascade 우선순위를 바꾸는 방식과 사용 한계를 배웁니다.
!important는 같은 origin/layer에서 일반 선언보다 먼저 비교됩니다. 긴급한 덮어쓰기처럼 보이지만 재정의가 어려워지므로 외부 코드 제어 등 명확한 이유가 있을 때 제한적으로 사용합니다.
이번 예제의 출발점은 color: red !important;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 !important를 제거해 더 구체적인 규칙이 적용되는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
스타일이 안 맞을 때마다 !important를 붙이면 구조적인 선택자 문제를 해결하기 더 어려워집니다.
직접 바꿔보세요!important를 제거해 더 구체적인 규칙이 적용되는지 확인하세요.