1. 선택자 점수

선택자	point
!important	무한대
인라인선언	1000
ID선택자	100
CLASS 선택자	10
TAG선택자, 가상요소(before,after)	1
전체선택자(*)	1
not	0

2. 예시

.desk li.items{color:black} : 21= 10(class) + 1(tag)+ 10(class)
.desk li:focus{color:black} : 21= 10(class) + 1(tag)+ 10(focus => 가상클래스)
.desk::after{content:"test"}: 11= 10(class) + 1(after=>가상요소)
#pwd span{color:black}      :101= 100(id)+1(tag)
header .main li:nth-child(3){color:black} :  22= 1(tag)+ 10(class) + 1(tag) +10(nth-child=>가상클래스)
:not(.box) : 10 = 0(not=>0점)) + 10 (.box => 클래스)

3. 동점인 경우

선택자가 동일 점수인 경우 css내 나중에 선언된 선택자로 선택됨(덮어씀)

아래의 경우 green으로 green이 나중에 선언되어 있으므로..

<div id="test" class="test"> Test </div>

.hello{color:red}
.hello{color:green}

4. 주의사항

가능하면 !important, 인라인선언은 사용하지 말자!!
점수가 너무 높아 서로 꼬여서 나중에 관리하기 어려움.