상속 제어하기

initial

[html]

<div class="parent">
	parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

[css]

.parent {
	color: blue;
}
.child2 {
	color: red;
}

=> child1는 폰트 색깔을 지정받지 못했다. 이런경우 부모의 폰트 색깔을 상속받는다. 이렇게 color와 같이 상속받는 property가 몇 가지 있다.

여기서 상속받지 않으려면? initial

.child1{
	color: initial;
}

부모에 color 와 font-size 두가지가 있을 때 모두 상속받지 않으려면? all: initial

.child1 {
	all: initial;
 }

---

inherit

다른 스타일들이 있어도 무조건 부모의 스타일을 상속받는다.

.parent2 * {
	all: inherit;
}

---

unset

1. 부모로부터 상속받을 값이 있을 때 : inherit로 적용
2. 부모로부터 상속받을 값이 없을 때 : initial로 적용