CSS를 적용 할때 해당 내용들이 중첩 되었을 경우, 우선 순위에 따라 HTML(3) < 사용자 지정(2) < 개발자 스타일 시트(1) 순으로 지정이 됩니다.
그리고 개발자 스타일 시트 안에서도 link태그 CSS(3) < style 태그 CSS(2) < 태그 내에 작성하는 인라인 스타일CSS(1) 순으로 그 중요도가 결정 되는데요, CSS의 중요도는 다음과 같이 정리 할 수 있습니다.
- 인라인 스타일 CSS
- style 태그의 CSS
- link 태그의 CSS
- 사용자 스타일시트 (사용자 임의 정의)
- 브라우저 스타일 시트(HTML 영역)
이러한 CSS의 캐스케이딩 우선 순위는 구체성(명시도),
- ID 선택자 (#id)
- 클래스 | 가상 선택자 (.class | div:nth-child() 등)
- 태그 선택자 (p, h1 등)
- 전체 선택자 (*)
- 부모에게 상속받은 속성
See the Pen 캐스케이딩-구체성 by 종민박 (@kfwueolj-the-scripter) on CodePen.
하지만 이러한 우선 순위에도 불구하고 속성에 !important를 작성 할경우 해당 CSS 속성이 가장 우선적으로 컨텐츠에 적용이 됩니다.
See the Pen 캐스케이딩 !important by 종민박 (@kfwueolj-the-scripter) on CodePen.
또한 같은 선택자가 여럿이 대상을 선택 하였더라도 후순위로 지정 된 스타일이 해당 컨텐츠에 대한 CSS 적용 우선권을 가집니다.
See the Pen 캐스케이딩 선언순서 by 종민박 (@kfwueolj-the-scripter) on CodePen.
이러한 CSS의 기본 태그는 우선적으로 알아야 할 것이 같은 선택자를 지정하는 속성일 경우 뒤에 오는 선택자와 해당 속성, 값이 우선권을 갔는 것을 주의해야 하며, 선택자의 우선 순위는 인라인 스타일이 가장 최우선적으로 가지며 (!importatn→inline_style→ID → class → 태그 선택자 → * )등의 순서로 중요도를 가지며 명시도 순으로 정하면 (∞→1000→100→10→1→0)의 스코어 순입니다.
즉 CSS 코드에서 선택자가 구체적으로 명시 되는 정도에 따라 그 우선 순위를 가질 수 있다는 것입니다.
See the Pen 선택자 우선 순위1-2 by 종민박 (@kfwueolj-the-scripter) on CodePen.
'프론트 엔드 > CSS' 카테고리의 다른 글
9-1. 레이아웃 (Float, Flex, Grid) (0) | 2023.07.20 |
---|---|
8. 박스 및 컨텐츠 크기 총정리 (0) | 2023.07.20 |
6. 선택자 총정리 (0) | 2023.07.20 |
5. 배경 총정리 (0) | 2023.07.20 |
4. 폰트 및 스타일 총정리 (0) | 2023.07.18 |