HTML&CSS
CSS 적용 우선순위 계산법
심재철
2019. 6. 18. 09:45
| 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>
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/