css는 우선 순위에 따라 적용된다.
선택자 우선순위에는 3가지 원칙이 있다.
- 후자 우선의 원칙
- 구체성의 원칙
- 중요성의 원칙
cf)
python -> snake표기법 사용 : who_am_i
javascript -> camel : whoAmI
html,css -> who-am-i 로하면 더블클릭시 who만 선택가능이라 편리함
📌 후자 우선의 원칙
: 동일한 선택자가 연속으로 사용되었을 경우,
후자가 우선
이렇게 동일한 p 태그에 css가 적용이 되어 있다면,
후자인 color: green이 적용이 된다!
📌 구체성의 원칙
: 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면,
구체적인 선택자가 우선!!
위의 태그가 조금더 구체적으로 명시되어 있기 때문에,
빨간색이 적용되는 것을 볼 수 있다.
구체성의 원칙 가중치
가중치를 기준으로 구체성을 판단하는데,
⭐️⭐️⭐️ID > ⭐️⭐️Class > ⭐️Type 순으로 적용!!
우선 순위 계산
선택자에 따라 해당하는 가중치 점수는 다음과 같다.
- inline-style(요소의 안에 속성으로 선언되는 스타일) : 1000점
- id 선택자(#) : 100점
- class(.), 가상클래스, 속성선택자 : 10점
- 타입, 가상요소 선택자 : 1점
- 전체선택자 ( * ) : 0점
중요도 점수 계산 자리올림 안됨!
아무리 동메달많이따도 은메달못이기는거 개념으로 생각!
1점짜리 12개 vs 10점 1개 1점 2개
후자 win
📌 중요성의 원칙
!important : 다른 속성보다 더 우선적으로 적용되어야할 중요한 스타일 속성으로,
절대적인 우선 순위가 된다.
별로 좋은 방법은 아님!
important끼리는 우선 순위가 어떻게 될까?
절대자여도 점수가 높은 것에 따라 우선 순위가 바뀜!!
절대자도 메달 갯수는 센다!(신들의 올림픽ㅋㅋㅋㅋㅋ)
Q) 근데 왜 에어비엔비에서는 important를 쓰지?
A) 많은 대규모 웹, 앱에서 CSS의 문제는 우선순위를 유지하는 것이 너무 어려워 어느 시점에서 추가 !important 를 피하기 어렵다.
그리고 스타일을 섯불리 제거하거나 수정하면 다른 구성 요소가 손상될 수 있으므로 important를 사용!
