우선순위

우선순위 규칙

출처(origin)
- 스타일을 지정한 주체
- 3가지
  - 작성자(author): 웹페이지를 작성한 사람이 지정한 인라인 스타일이나 css 스타일시트의 값
  - 에이전트(user agent): 웹페이지를 보여주는 웹 브라우저 프로그램에 지정된 기본값
  - 사용자(user): 웹 브라우저를 이용하여 웹페이지를 보는 사람이 지정한 값
important 키워드
- 스타일 값 뒤에 !important 키워드를 붙일 수 있음
- 예시: color: red !important;
- important 키워드가 있으면 우선순위가 바뀜
- important 키워드가 없는 보통의 경우는 normal이라고 부름
출처에 따른 순서
1. Important user agent declarations
2. Important user declarations
3. Important author declarations
4. Normal author declarations
5. Normal user declarations
6. Normal user agent declarations
설명
- import는 non-important보다 무조건 앞
- normal 값의 경우 작성자 > 사용자 > 에이전트 순서
  - 보통의 경우에는 웹페이지를 만든 작성자가 지정한 값을 가장 우선으로 하고 해당 값이 없는 경우 사용자, 에이전트의 순서로 값을 찾아서 사용
- important 값의 경우 에이전트 > 사용자 > 작성자 순서
  - important 값의 경우에는 보안문제 등을 고려하여 에이전트가 가진 값을 가장 우선적으로 사용

예시

<a href="/specials" style="background-color: orange;">Specials</a>

예시: 다음의 경우 나중에 선언한 l2 레이어의 우선순위가 높음

@layer l1 {
  h1 { 
    color: white;
  }
}
@layer l2 {
  h1 { 
    color: black;
  }
}

예시	id	class	tag	표기
html body header h1	0	0	4	0,0,4
body header.page-header h1	0	1	3	0,1,3
.page-header .title	0	2	0	0,2,0
#page-title	1	0	0	1,0,0