거시적으로 따지면 tag와 가까울 수록 우선 순위가 높다고 할 수 있다.
인라인CSS(태그 요소로 들어 있는 style) > 내부CSS(head 영역에 들어가 있는 style) > 외부CSS(html 밖에 있는 css 파일)
이런 원리에 의해서 style 태그 내부 가장 아래에 있는 선택자가 우선시 되는 것이다.
그런데 이렇게 단순하게 해소가 된다면 얼마나 좋겠냐만 실제로 그렇지 않다.
https://developer.mozilla.org/ko/docs/Web/CSS/Specificity
https://specifishity.com/ -> MDN에서 redirect해준 쉽게 이해할 수 있는 예제
가중치 점수 계산을 통해 우선순위가 정해진다.
가중치 점수
!important >>>> style attribute(inline) > id > class > element > *(전체 선택자)
!important: 절대적 우선 순위 1-0-0-0-0점>>>>>>
inline-style(style attribute in element): 1-0-0-0점 >
id(#[id명]) : 0-1-0-0점 >
class(.[class명]), 속성 선택자([attrname]), 가상클래스(:[pseudo-class명]) : 0-0-1-0점 >
요소(보통 tag가 될 것 같다), 가상요소(::[pseudo-element명]) : 0-0-0-1점 >
전체 선택자(*): 0-0-0-0점
각 선택자들(ex. p#name, a.myhomepage 등)이 가진 가중치를 더해서 점수가 높은 애들부터 우선순위가 매겨진다.
특히 기억하고 주의할 것
!important
는 개인 프로젝트에 사용하지 말 것! -> !important를 쓰는 행위 자체가 자신이 프로젝트를 이해하지 못하고 있음을 방증하는 것이다.
면접에 들어가서 "여기에 important를 왜 넣었나요? 이 프로젝트 설명 좀 해볼래요?" 질문 받기 싫으면 알아서 잘 하자^^
+21.11.04 + 추가
class 11개 vs id 1개+class 1개
→ id 포함된게 우선순위 더 높다
상속까지 생각해야 된다🤮 css 책에서는 선택자 가중치 점수 계산법만 30페이지가 넘는단다..^^
'Etc. > CSS' 카테고리의 다른 글
[CSS] flex (0) | 2021.11.06 |
---|---|
[CSS] inline element (0) | 2021.11.05 |
[CSS] 가상 클래스(Pseudo-class) vs 가상 요소(Pseudo-element) (0) | 2021.11.03 |
[CSS] float (0) | 2021.10.29 |
[CSS] 선택자(후손 및 자손, 동위) (0) | 2021.10.28 |
댓글