1976s
이 블로그는 웹 개발, 프로그래밍, IT 활용법을 다루며, 실용적인 팁과 정보를 제공합니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
공부/CSS
CSS 선택자(Selector) 우선순위
기억해야할 기본 CSS
스타일을 적용하는 데는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다.
선택자(Selector) 우선순위 복합 선택자 패턴에서의 우선 적용 순위 규칙
!important 선언을 한 사용자 스타일 > !important 선언을 한 작성자 스타일 > 작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언)
| 선택자우선순위 | 선택자방식 | 적용예 | 혼용 방식의 점수 산정 | 비고 |
| 속성 기준 가장 우선 | !important | 속성: 적용 값 !important; |
속성 기준 가장 우선 | 속성 기준 가장 우선 |
| 1 | 인라인 스타일 | style=”” | 1000 | 요소 기준 가장 우선 |
| 2 | ID 선택자 | #selector | 100 | #header > .logo > a { } |
| 3 | CLASS 선택자 | .selector | 10 | |
| 3 | 속성 기반 선택자 | a[href*=”#”] | 10 | |
| 3 | 가상 클래스 | a:hover | 10 | |
| 4 | 가상 요소 | span::after | 1 | |
| 4 | 태그 선택자 | a | 1 | |
| 5 | 전체 선택자 | * | 0 |
동일한 선택자의 경우 뒤쪽에 것이 우선으로 선택되며 재정의도 된다.
예) 'p.test = 1 + 10 = 11' 으로 계산
'#test p.text = 100 + 1 + 10 = 111'으로 계산
Some examples:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
CSS 문서 삽입 위치 우선순위
- <head> 요소안의 style 요소
- <style> 요소안의 @import 문
- <link> 요소로 연결된 CSS 파일
- <link> 요소로 연결한 CSS 파일 안의 @import 문
- 최종 사용자가 연결한 CSS 파일
- 브라우저의 기본 스타일시트
여러 CSS파일이 같은 우선순위 위치에서 연결되고 삽입되어 있을 때는 연결/삽입 순서에 따라 우선순위가 결정된다. 가장 마지막에 연결/삽입된 스타일 시트가 앞의 스타일 시트보다 우선순위가 높다.
마치며
여기까지는 css의 기본 우선순위 알아보았습니다.