230213 CSS 우선순위: 인라인 스타일 > 아이디 > 클래스 > 요소

우선순위

인라인 스타일 (ex. style = "color: pink") > 아이디 # > 클래스 . > 요소 p

There are four categories which define the specificity level of a selector:

• Inline styles ex) <h1 style="color: pink;">
• IDs ex) #navbar
• Classes, pseudo-classes, attribute selectors ex) .test, :hover, [href]
• Elements and pseudo-elements ex) h1, :before

How to Calculate Specificity?

Memorize how to calculate specificity!

Start at 0, add 100 for each ID value,
add 10 for each class value (or pseudo-class or attribute selector),
add 1 for each element selector or pseudo-element.

Note: Inline style gets a specificity value of 1000, and is always given the highest priority!
Note 2: There is one exception to this rule: if you use the !important rule, it will even override inline styles!

A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>

The specificity of A is 1 (one element selector)
The specificity of B is 101 = 1 + 100 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)

Since the third rule (C) has the highest specificity value (1000), this style declaration will be applied.

참고: https://www.w3schools.com/css/css_specificity.asp

---