선택자 패턴에서의 우선순위 적용 규칙
!important
인라인 스타일 요소 style="color:red"
#id
.class
속성기반
가상
Tag
*
CSS 명시도 계산법
1. inline 스타일 : 1000점
2. Id 선택자 개수(#) : 100점
3. Class 선택자 개수 (.) : 10점
4. Tag, Element 선택자 개수 : 1점
5. !important : 그냥 강제로 무조건 적용 (99999999...점)
6. 전체 선택자 (*) : 0점
7. 가상 엘리먼트는 무시
* 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음
* 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침
* 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적용된다.
🤯 CSS 작성하면서 깨달은 점
inline과 !important는 최대한 지양하자.
한번 사용하기 시작하면 계속 사용될 수 밖에 없다. 그니까 애초에 최대한 사용하지말고 작업을 하도록!
클래스를 잘 주는 버릇을 들이자! 클래스를 추가해 명시도를 높여 우선 적용시키자.
명시도 - CSS: Cascading Style Sheets | MDN
명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.
developer.mozilla.org
'Mark Up & StyleSheet > CSS & SCSS' 카테고리의 다른 글
| [SCSS] Architecture (폴더 구조) (1) | 2023.12.11 |
|---|---|
| [CSS] filter 적용하기 (1) | 2023.12.10 |
| [CSS] 헷갈리는 가상클래스 child vs of-type (2) | 2023.12.10 |
| [CSS] Reset CSS (1) | 2023.11.04 |
| [CSS] 이미지 종횡비 유지하기 (0) | 2022.11.22 |