CSS 적용 우선 순위에 따라 결과가 달라진다 : 개별성 규칙

CSS 적용 우선 순위와 개별성

✔️ 개별성 규칙의 점수 총합에 따라 최종적으로 html 요소에 적용될 css 스타일이 결정됨

See the Pen 적용 우선 순위와 개별성 순위 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

 

✔️ 같은 대상에 속성을 적용 할 경우, 중복되는 속성에 한해서는 개별성 점수가 높은 쪽을 따라감

See the Pen 적용 우선 순위와 개별성 같은 대상 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

✔️ 점수가 같을 경우, 나중에 작성된 css 코드가 적용됨

See the Pen 적용 우선 순위와 개별성 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

개별성 규칙의 점수

선택자	예	점수
전체 선택자	*	0
태그 선택자	div, p, h1	1
가상 요소 선택자	::before, ::after	1
클래스 선택자	.box, .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 스타일	style="color:red"	1,000

 

CSS의 선택자를 지정할 때, 일일이 개별성 규칙 점수를 계산하는 것은 현실적으로 매우 어려움 😅

선택자를 최대한 자세하게 적을수록 점수가 더 높다고 생각하고 선택자를 지정하면 편함 👍