CSS 적용 우선순위 계산법

1	* { }	0
2	li { }	1 (one element)
3	li:first-line { }	2 (one element, one pseudo-element)
4	ul li { }	2 (two elements)
5	ul ol+li { }	3 (three elements)
6	h1 + *[rel=up] { }	11 (one attribute, one element)
7	ul ol li.red { }	13 (one class, three elements)
8	li.red.level { }	21 (two classes, one element)
9	style=“”	1000 (one inline styling)
10	p { }	1 (one HTML selector)
11	div p { }	2 (two HTML selectors)
12	.sith	10 (one class selector)
13	div p.sith { }	12 (two HTML selectors and a class selector)
14	#sith	100 (one id selector)
15	body #darkside .sith p { }	112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

html 엘리먼트와 가상요소는 1점,

class와 가상 클래스 10점(+ 속성도 10점),

#id 100점,

inline style 1000점으로 계산한다.

 

A: h1

B: #content h1

C:

<div id="content">

  <h1 style="color: #fff">Headline</h1>

</div>

Copy

The specificity of A is 0,0,0,1 (one element), the specificity of B is 0,1,0,1 (one ID reference point and one element), the specificity value of C is 1,0,0,0, since it is an inline styling.

 

a 태그에 스타일을 줄땐

LVHA 순서대로

-> Link Visitied Hover Active

 

https://specificity.keegan.st/

css 우선순위 계산해주는 사이트

 

 

 

 

 

 

 

 

 

 

 

출처

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/