CSS_상속

CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같습니다.

어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다.

상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념입니다.

상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있습니다.

 

예를 들어 <h1> 태그 안에 자식태그로 <span>태그를 가진 상태에서

<h1>태그에 스타일이 지정 되면 <span>태그는 부모인 <h1>의 스타일을 상속받습니다.

모든 속성이 다 상속되는 것은 아니며 대표적으로 박스모델속성(margin,padding,background,border)은 상속되지않습니다.

 

이때 상속받은 속성은 구체성을 가지지 못합니다. (0,0,0,0보다도 적습니다.)

"CSS"는 상속된 속성을 따르면 빨간색으로 보여야하지만

위에 * 전체선택자가 있기 때문에 파란색으로 표현됩니다.

 

* 전체선택자는 비록 구체성이 0,0,0,0으로 낮지만 상속된 속성보다는 높기 때문에 우선 적용됩니다.