CSS 상속 제어

 

 

 

CSS 상속

   - 부모태그에 적용된 CSS 는 자식태그에 동일한 CSS가 존재하지 않는 한 상속된다.

 

 

initial

.parent{
	color : blue;
	font-size: 7px;
}

.child{
	color: initial;
    font-size: initial;
}

   > 부모 태그의 CSS 스타일을 상속받지 않게 하는 속성

 

.child{
	all : initial;
}

   > 부모로부터 오는 css 스타일이 많다면 all을 사용하여 한번에 처리할 수 있다.

 

 

inherit

/* CSS */

div{
    border: 1px solid silver;
    margin: 2px;
}

.child1{
	color: red;
}

.parent1, child2{
	color: blue;
}

.parent2 *{
	color:inherit;
}


<!-- HTML -->
<div class="parent1">
	<div class="child1">child1</div>	
	<div class="child2">child2</div>
</div>
<div class="parent2">
	<div class="child1">child1</div>
	<div class="child2">child2</div>
</div>

실행화면

   > 부모태그의 속성을 무조건 적용하는 속성

   > 해당 속성을 가진 태그의 자식태그는 자식태그의 스타일을 무시하고 부모 태그의 스타일을 상속받는다.

   > all 을 사용해 모든 스타일을 상속시킬 수 있다.

 

 

unset

   - 부모로부터 상속받을 값이 존재할때 : inherit 과 동일

   - 부모로부터 상속받을 값이 존재하지 않을 때 : initial, 즉 초기값으로 동작