cascade와 상속

개념 이해하기

브라우저는 먼저 현재 환경에 관련 있고 선택자가 일치하는 규칙을 모은 뒤 origin과 important, cascade layer, specificity, scoping proximity, 작성 순서를 비교합니다. color와 font 계열은 자식에게 상속되는 경우가 많지만 margin과 border는 일반적으로 상속되지 않습니다. inherit, initial, unset, revert로 값을 명시적으로 되돌릴 수 있습니다.

.cascade-demo에 준 초록 글자색은 상속되어 h1과 .panel, 그 안의 두 문단까지 내려갑니다. .panel의 테두리는 currentColor라 물려받은 초록으로 그려지지만 border 자체는 상속되지 않아 두 p에는 테두리가 없습니다. .second에는 갈색과 초록 규칙이 차례로 있는데 명시도가 같아 뒤에 적은 초록이 이기므로, 결국 화면의 글자는 모두 초록입니다.

all 속성은 unicode-bidi와 direction을 뺀 모든 속성을 한 번에 되돌립니다. 외부 위젯을 감싼 요소처럼 바깥 스타일의 영향을 끊고 싶은 곳에 all: revert를 주면, 그 요소에 걸린 작성자 스타일이 한꺼번에 걷히고 브라우저 기본 스타일로 돌아갑니다.