[알쓸신잡] CSS Priority Order

Web › Enlighten
css, dev, html

우선순위

스타일시트

우선순위 종류 부가 설명
1(min) User Agent 브라우저 스타일
2 User Style Sheet 사용자가 정한 스타일(테마)
3 Author Style Sheet 우리(제작자)가 넣는 스타일
4 Author Style Sheet - !important 우리(제작자)가 넣는 스타일 - !important
5(max) User Style Sheet - !important 사용자가 정한 스타일 (테마)- !important

User Style - !important > Author Style - !important > Author Style > User Style > User Agent

위의 순서대로 영향력(명시도)이 강합니다.

자세히 보시면 여기서 !important 란 놈이 나오는데 이 녀석은 또 뭔가 싶으실 수도 있습니다.

기본 룰을 깨버리는 무서운 놈입니다. 아래에서 좀더 자세히 다루겠습니다.


선택자

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.

  1. a : style 태그를 이용한 스타일을 뜻해요. +1000점

ex)

<!-- inline style -->
<p style="color: #ec185e;"> 퍼실 안내</p>

<!-- style tag in head -->
<style>
 p { color: #ec1852;}
</style>


  1. b : selector 중에 id selector의 개수*100 만큼 score가 증가해요.

ex)

<p id="facil focus"> 퍼실 안내</p> <!-- score 는 200점-->

<p id="lab"> 랩짱 안내</p> <!-- 얘는 100점-->


  1. c : selector 중에 class selector, pseudo class, attribute 개수*10 만큼 score가 증가해요.

ex)

/* class(10) + hover(10) + a(1) = 21점 */
.facil a:hover {}


  1. d : selector 중에 element와 pseudo elements 의 개수*1 만큼 score가 증가해요. 위의 pseudo class 와 헷갈리면 안돼요.

ex)

/* class(10) + link(1) + a(1) = 12점 */
.facil a:link {}

Example