무시된 선언과 적용되지 않는 선택자를 체계적으로 찾습니다.
브라우저는 모르는 속성이나 잘못된 값만 건너뛰고 가능한 다음 선언은 계속 처리합니다. 개발자 도구의 취소선, 경고 표시, 선택자 일치 여부를 차례로 확인합니다.
이번 예제의 출발점은 property: valid-value;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 .not-found를 .second로 고쳐 선택자 오류를 해결하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
무작정 !important를 붙이면 원인을 가리고 나중의 우선순위 문제를 키웁니다.
직접 바꿔보세요.not-found를 .second로 고쳐 선택자 오류를 해결하세요.