CSS 선택자 우선순위

스타일시트를 작성할 때 element, id, class 등을 사용하여 요소를 선택하는데
이때 우선순위가 있다.
우선순위는 각각의 선택자 점수표로 매겨진다.

• a = 선택자 중 id의 수를 세어 100자리에 놓는다.
• b = 선택자 중 class와 가상클래스(pseudo)의 수를 세어 10자리에 놓는다.
• c = 선택자 중 element의 수를 세어 1의 자리에 놓는다.
• d = 가상 element는 무시한다.

선택자 점수 표

선택자	a(=100)	b(=10)	c(=1)	우선순위 점수 합계
* { }	0	0	0	0
li { }	0	0	1	1
ul li { }	0	0	2	2
ul ol+li { }	0	0	3	3
li.num { }	0	1	1	11
ul+ol li.num { }	0	1	3	13
li.num.list { }	0	2	1	21
#wrap { }	1	0	0	100
p#wrap { }	1	0	1	101

예시1.

<style type='text/css'>
  p#wrap { color: red; } /* 101 */
  #wrap { color: blue; } /* 100 */
  p { color:yellow; } /* 1 */
</style>

<p class='wrap' id='wrap'>Lorem Ipsum</p>

p element의 컬러는 우선순위가 가장 높은 p#wrap에 의해 빨간색이 적용된다.

예시2.

<style type="text/css">
  #wrap { color: blue; } /* 100 */
</style>

<p id="wrap" style="color: red;">Lorem Ipsum</p>

이 경우 우선순위는 #wrap 과 style 속성이 100으로 같기 때문에 inline 으로 선언된 빨간색이 적용된다.

예시3.

<style type="text/css">
  .wrap { color: blue; } /* 10 */
  .notice { color: green; } /* 10 */
</style>

<p class="wrap notice">Lorem Ipsum</p>
<p class="notice wrap">Lorem Ipsum</p> <!-- 동일 -->

이 경우 선택자 우선순위가 같기 때문에 스타일태그에 나중에 선언된 style 인 초록색이 적용된다.

예시3-1.

<style type="text/css">
  .wrap.notice { color: pink; } /* 20 */
  .wrap { color: blue; } /* 10 */
  .notice { color: green; } /* 10 */
</style>

<p id="wrap notice">Lorem Ipsum</p>

이 경우 두가지 클래스를 함께 명시한 분홍색이 적용된다.