[CSS]css 상속, css 적용 우선순위

자식, 자손요소들은 부모의 속성값을 그대로 상속받습니다.

먼저 부모, 자식, 자손 요소에 대해 알아볼까요? 우리가 생각하는 가계도와 똑같습니다.
일단 제일 위에 값을 부모라고 합니다. 그 바로 밑에 위치하는 애들이 자식요소입니다.
이 자식 요소안에 위치하는 애들은 자손입니다.
모든 부모에게 부모가 있는 것처럼 부모요소 또한 상위개념 요소에게는 자식요소가 됩니다.

상속

자식, 자손요소는 부모요소의 속성값을 상속받습니다.

하지만 상속은 절대적인 것은 아닙니다.
상속이 안되는 속성값도 있고, 특정속성을 상속받지 않는 태그도 있습니다.

• http://www.w3.org/TR/CSS21/propidx.html  inHerited? 가 yes인 경우만 상속됨
• 속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있음

예를 들어, color 속성은 상속되게 되는데, 부모요소인 #parent에 color값을 주면 자식, 자손들이 상속받습니다.

<div id="parent">
   <h1>나는 자식입니다.</h1>
   <p>나도 자식입니다.</p>
   <div>
   <span>나는 자손이에요</span>
   </div>
</div>
 

css 적용 우선순위

CSS의 특성상 중복되는 속성이 등장 할 수 있는데 이때는 아래와 같은 특정 원칙에 따라 CSS를 처리합니다.

1. 속성값 뒤에 !important 를 붙인 속성 
2. HTML에서 style을 직접 지정한 속성 
3. #id 로 지정한 속성 
4. .클래스, :추상클래스 로 지정한 속성 
5. 태그이름 으로 지정한 속성 
6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 쪽수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 나중에 선언한 것이 우선되어 적용된다.

CSS에는 중복되는 속성 사용시 특정 순위에 따라 적용하는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면 속성 값 뒤에!important 를 사용하면 된다.

!important 는 우선순위 뿐만 아니라 디자이너-개발자간 교류에서 중요한 속성이라는 표현을 할 때 쓰이기도 한다.