• 명시성
명시성(specificity)은 CSS의 선택자(selector)가 얼마나 구체적인지를 나타내는 값을 의미합니다. 선택자란 말 그대로 스타일을 적용할 요소를 선택해주는 요소입니다. CSS에는 내부적으로 선택자에 따른 명시성 값이 다음과 같이 정의돼 있습니다.
• 인라인 선택자: 1000
• 아이디 선택자: 100
• 클래스 선택자, 가상 클래스 선택자, 속성 선택자: 10
• 요소 선택자, 가상 요소 선택자: 1
명시성 값의 총합이 높은 스타일이 총합이 낮은 스타일보다 우선 적용됩니다.
• 작성 순서
중요도와 명시성을 판단해도 우선순위가 결정되지 않는다면 마지막으로 적용하는 원칙은 작성 순서입니다. 가장 늦게 작성된 CSS 속성일수록 우선순위가 더 높습니다.