[CSS] Cascading

CSS의 우선순위를 결정하는 세 가지 요소

• 순서 / 디테일 / 선택자

 

순서에 의한 Cascading

// HTML 문서
<p>Hello World</p>
 
// style.css 문서
p { color: red; }
p { color: blue; }

• 나중에 적용한 속성값의 우선순위가 높음 ( p { color: blue; } )

디테일에 의한 Cascading

// HTML 문서
<header>
    <p>Hello World</p>
</header>
 
// style.css 문서
header p { color: red; }
p { color: blue; }

• 더 구체적으로 작성된 선택자의 우선순위가 높음 ( header p { color: red; } )

선택자에 의한 Cascading

// HTML 문서
<h3 style="color: pink" id="color" class="color"> color </h3>
 
// style.css 문서
#color { color: blue; }
.color { color: red; }
h3 { color: green; }

• style > id > class > type 순으로 우선순위가 높음 (SICT 로 외우기)