CSS 상속

.ecosystem에 적용된 색상이, 하위 요소들에게도 적용이 된다. (모두 그런것은 아니고 주로 text가 이러한 현상이 일어난다.)

.ecosystem{
    color : red;
}

<div class = "ecosystem">생태계
        <div class = "animal">동물
            <div class ="tiger">호랑이</div>
        </div>
</div>

전부 적용된 모습

 

 

1. 강제 상속

상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 "부모"에서 "자식"으로 강제 상속 시킬 수 있다. "자식"을 제외한 "후손"에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.

.parent{
    position : absolute; /* 상속되지 않는 속성과 값 */
}

.child {
    position : inherit; /* 강제 상속 받아 position : absolute;와 동일 */
}

<div class = "parent">
        <div class = "child"></div>
 </div>