여러 규칙이 충돌할 때 어떤 선언이 선택되는지 이해합니다.
같은 속성이 충돌하면 중요도, cascade layer, specificity, 소스 순서를 비교합니다. 일반적으로 id가 class보다, class가 태그보다 구체적이지만 유지보수를 위해 낮고 일정한 specificity가 좋습니다.
이번 예제의 출발점은 태그 < .class < #id입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 id 규칙을 제거하고 최종 색상이 어떻게 바뀌는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
선택자를 계속 길게 만들며 우선순위 경쟁을 키우지 마세요.
직접 바꿔보세요id 규칙을 제거하고 최종 색상이 어떻게 바뀌는지 확인하세요.