2014년 4월 27일 일요일

CSS 스타일의 우선순위

스타일의 우선순위 

1. 스타일에서 가장 우선순위는 가장 마지막에 지정된 스타일.

2. 요소와 id > 요소와 클래스 > 요소 순으로 우선순위가 결정됨
<style type="text/css">
div { background:red }
div.color { background:blue }
div#bg { background:green }
</style>

<div id="bg" class="color">
이경우 우선순위는 div#bg
</div>

결과
이경우 우선순위는 div#bg

1순위 div#bg
2순위 div.color
3순위 div




3. "!important"를 선언한 스타일이 가장 먼저 적용됨.
<style type="text/css">
div { background:red }
div.color { background:blue !important;  }
div#bg { background:green }
</style>

<div id="bg" class="color">
이경우 우선순위는 div.color
</div>

결과
이경우 우선순위는 div.color

1순위 div.color
2순위 div#bg
3순위 div