★★ CSS(Cascading Style Sheets) 적용 우선순위

 

 

CSS(Cascading Style Sheets) 적용 우선순위

1. 중요성(Importance)

• `!important`로 선언된 규칙이 일반적인 규칙보다 먼저 적용된다.
• 이 때 사용자 스타일 시트의 `!important`가 저자 스타일 시트의 `!important`보다 우선되며, 그 다음에는 저자, 그리고 사용자 스타일 시트가 적용된다.

 

 

 

2. 명시도(Specificity)

• 선택자의 명시도가 높은 순서로 적용된다. 

1. 인라인 스타일: `<tag style="...">`
2. ID 선택자: `#idName`
3. 클래스 선택자: `.className`, 속성 선택자: `[attribute]`, 가상 클래스 선택자: `:hover`
4. 태그 선택자: `tag`, 가상 요소 선택자: `::before`

• 같은 선택자 유형에서 명시도가 동일한 경우, 나중에 작성된 스타일이 적용된다.

 

 

3. 출처(Origin)

• 스타일 시트의 출처에 따라 적용 순위가 결정된다.

1. 사용자 정의 `!important` 스타일
2. 저자 정의 `!important` 스타일
3. 저자 정의 스타일
4. 사용자 정의 스타일
5. 브라우저 기본 스타일

 

 

 

4. 선언순서

• 위의 우선순위가 동일한 경우, CSS 코드 내에서 나중에 선언된 스타일이 적용된다.