태그, class, id와 속성 선택자로 정확한 요소를 고릅니다.
태그 선택자는 같은 요소 전체, .class는 재사용 그룹, #id는 고유 요소를 고릅니다. 실제 UI 스타일에는 재사용하기 쉽고 우선순위가 과하지 않은 class 선택자가 가장 흔합니다.
이번 예제의 출발점은 p, .target, #unique, [disabled]입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 .second만 선택해 글자색을 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
지나치게 긴 후손 선택자와 id 중심 스타일은 재사용과 덮어쓰기를 어렵게 합니다.
직접 바꿔보세요.second만 선택해 글자색을 바꾸세요.