여러 CSS 선언이 충돌할 때 최종값이 결정되는 순서와 상속을 이해합니다.
브라우저는 먼저 현재 환경에 관련 있고 선택자가 일치하는 규칙을 모은 뒤 origin과 important, cascade layer, specificity, scoping proximity, 작성 순서를 비교합니다. color와 font 계열은 자식에게 상속되는 경우가 많지만 margin과 border는 일반적으로 상속되지 않습니다. inherit, initial, unset, revert로 값을 명시적으로 되돌릴 수 있습니다.
이번 예제의 출발점은 color: inherit; margin: initial; all: revert;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 second의 마지막 규칙을 앞쪽으로 옮기고 inherit와 initial 결과를 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
specificity만 비교하면 안 됩니다. !important 여부와 origin, layer가 다르면 더 구체적인 선택자가 질 수도 있습니다.
직접 바꿔보세요second의 마지막 규칙을 앞쪽으로 옮기고 inherit와 initial 결과를 비교하세요.