[CSS] CSS 명시도 계산법

선택자 패턴에서의 우선순위 적용 규칙

!important 
인라인 스타일 요소 style="color:red"  
#id
.class
속성기반
가상
Tag
*

CSS 명시도 계산법

1. inline 스타일 : 1000점

2. Id 선택자 개수(#) : 100점

3. Class 선택자 개수 (.) : 10점

4. Tag, Element 선택자 개수 : 1점

5. !important : 그냥 강제로 무조건 적용 (99999999...점)

6. 전체 선택자 (*) : 0점

7. 가상 엘리먼트는 무시

 

* 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음

* 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침

* 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적용된다.

🤯 CSS 작성하면서 깨달은 점
inline과 !important는 최대한 지양하자. 
한번 사용하기 시작하면 계속 사용될 수 밖에 없다. 그니까 애초에 최대한 사용하지말고 작업을 하도록!
클래스를 잘 주는 버릇을 들이자! 클래스를 추가해 명시도를 높여 우선 적용시키자.

 

 

명시도 - CSS: Cascading Style Sheets | MDN