// ==============================================================
// 캐스케이딩
// ==============================================================
* 중요도
- 브라우저의 CSS
- 사용자 CSS 일반선언
- 저작자 CSS 일반선언
- 저작자 CSS의 !important
ex) h1 { color:blue !important }
h1 { color:red }
* 우선순위
- type
- class
- id
- inline으로 엘리먼트에 직접 css를 기술
ex)
<div>example</div>의 color 값에 여러개의 css선언이 영향을 주고 있음. 아래로 갈수록 우선순위가 높아짐.
<style type="text/css">
div{
color:purple
}
.examples{
color:blue;
}
#example{
color:red;
}
#example.examples{
color:green;
}
</style>
<div id="example" class="examples">
example
</div>
소스 상에서 css 선언이 나중에 나올수록 우선순위가 높아짐
<style type="text/css">
#example.examples{
color:red;
}
#example.examples{
color:green;
}
</style>
<div id="example" class="examples">
example
</div>