CSS(4) 선택자 우선순위

CSS 언어 충돌시 어떤 것을 우선하는지 규칙

이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity) 라고 함

1. 후자 우선의 원칙

2. 구체성(명시도)의 원칙

3. 중요성의 원칙

---

1. 후자 우선의 원칙

동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름

p {color: red; font-size:20px;}
p {color: blue;}
/* 뒤에 나온 파란색이 됨 */

 

2. 구체성의 원칙 (Specificity : 명시도)

어떤 선택자가 더 구체적인가?

<p class="green">구체적인 선택자</p>

.green{color:green;}
p {color: red; font-size:20px;}
p {color: blue;}
/* 구체적인 class 선택자에 따라 초록색 */

(가중치 높음) inline 스타일 속성 > id # > class . , 가상 클래스, 속성 선택자 > type / tag, 가상 요소 선택자 (가중치 낮음)

 

명시도 계산기 사이트

https://specificity.keegan.st

Specificity Calculator

 

3. 중요성의 원칙

!important

다른 CSS의 어떤 선언 보다도 우선

!important 는 선택자 우선순위에 직접적인 영향을 미침

주의) important 사용은 좋지 못한 습관. CSS의 자연스러운 상속을 깨뜨려 오류/버그 발생 시 수정을 어렵게 만듦.