Web/CSS
[WEB] CSS 선택자 우선순위
hh_lin
2018. 11. 17. 19:14
CSS 상속
상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.
이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.
ex) width, height, margin, padding, border
선택자 우선순위(CSS Specificity, Cascading Order)
∎ 선언 방식에 따른 차이
1 2 3 4 5 6 | span { color : red; } span { color : blue; } | cs |
같은 선택자라면 나중에 선언한 것이 적용된다. => blue
1 2 3 4 5 6 | body > span { color : red; } span { color : blue; } | cs |
선택자의 표현이 더 구체적인 것이 우선적으로 적용된다. => red
∎ ID > CLASS > ELEMENT 순으로 반영
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <head> <style> #a { color : red; } .b { color : blue; } div { color : green; } </style> </head> <body> <div id="a" class="b"> text... </div> </body> | cs |
id 속성이 우선적으로 적용된다. => red
참고자료