반응형
CSS 적용 우선 순위와 개별성
✔️ 개별성 규칙의 점수 총합에 따라 최종적으로 html 요소에 적용될 css 스타일이 결정됨
✔️ 같은 대상에 속성을 적용 할 경우, 중복되는 속성에 한해서는 개별성 점수가 높은 쪽을 따라감
✔️ 점수가 같을 경우, 나중에 작성된 css 코드가 적용됨
개별성 규칙의 점수
| 선택자 | 예 | 점수 |
| 전체 선택자 | * | 0 |
| 태그 선택자 | div, p, h1 | 1 |
| 가상 요소 선택자 | ::before, ::after | 1 |
| 클래스 선택자 | .box, .title | 10 |
| 가상 클래스 선택자 | :hover, :visited, :link | 10 |
| 아이디 선택자 | #title, #main | 100 |
| 인라인 스타일 | style="color:red" | 1,000 |
CSS의 선택자를 지정할 때, 일일이 개별성 규칙 점수를 계산하는 것은 현실적으로 매우 어려움 😅
선택자를 최대한 자세하게 적을수록 점수가 더 높다고 생각하고 선택자를 지정하면 편함 👍
반응형
'HTML + CSS + 자바스크립트' 카테고리의 다른 글
| 다양한 transition-timing-function 속성값으로 전환 효과 진행 속도 지정하기 (0) | 2023.11.29 |
|---|---|
| 다양한 border-style 속성값 활용하기 (0) | 2023.11.28 |
| 가상 클래스 선택자가 뭐지?? (0) | 2023.11.27 |
| HTML 많이 사용하는 input 태그의 type 속성값 (0) | 2023.11.23 |
| HTML 필수 태그 : 텍스트, 그룹, 목록, 링크, 이미지, 텍스트 강조 (0) | 2023.11.22 |
