[CSS 기본 개념] 캐스케이딩(cascading)/우선순위

1.1  캐스케이딩

-엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 함.

-css는 다양한 위치에서 기술될 수 있는데, 그 위치에 따라서 우선순위가 달라진다.

 (숫자 순으로 높음)

 

1. 저작자 CSS의 important

2. 저작자 CSS의 일반선언

3. 사용자 CSS의 일반선언

4. 브라우저의 CSS

 

Ex) h1 {color: red} h1 {color: purple !important} à h1에게 purple 색이 적용된다.

div { color: purple }   .examples { color: blue; }   #example { color: red; }   #example.examples { color: green; }   <div id="example" class="examples">example</div> à green 이 적용된다.

#example.examples { color: red; } 가 추가된다면, css선언이 나중에 선언된 red로 속성이 적용된다.