우선 적용 규칙

케스케이드(Cascade) 규칙

• 여러 개의 CSS 파일을 결합할 때, 충돌을 해결하는 프로세스가 Cascade 이다.

중요성 (Importance)

• !important 선언은 다른 모든 선언보다 우선권을 가진다.

• !important 가 적용된 속성을 덮어 쓰려면. 다시 !important를 사용해야 하기에 최대한(절대!) 사용하지 않도록 노력해야 한다.

특성 (Specificity)

• 선택자의 우선권에 대한 척도

• 각 척도를 1, 10, 100, 1000 단위로 생각하면 이해하기 좋다.

    요소 선택자 < 클래스 선택자 < ID 선택자 < 인라인 스타일
     0,0,0,1    0,0,1,0     0,1,0,0     1,0,0,0

*, >, +, ~ 등 콤비네이터(Combinators) 또는 :not() 가상 클래스는 특성에 영향을 주지 않는다.

예시

*                           --0000
a                           --0001
a.link                      --0011
li:nth-child(2) a:hover     --0022
.nav:nth-child(2) a:hover   --0031
#outer a                    --0101
#outer #inner a             --0201
style="color: tan"          --1000
                            --important

소스 순서

• 중요성, 특성이 설정되지 않았거나 동일한 경우 나중에 나온 소스의 스타일이 우선권을 가진다.

예시

p.note { color: #930212; }
p { color: #d5727e; } // 우선권을 가진다.

참고

• CSS 케스케이드(Cascade)

• class 속성 개수가 11개면 id 속성 보다 우선할까요?