CSS 명시도(Specificity)란?

스타일이 충돌할 때 어떤 것이 우선 적용될지를 결정하는 개념
웹 페이지에서 여러 개의 CSS 규칙이 동일한 요소에 적용될 수 있음
이때 브라우저는 명시도를 계산하여 어떤 스타일을 적용할지 판단함

우선순위
1. 인라인 스타일
2. id 선택자
3. 클래스, 가상 클래스, 속성 선택자
4. 요소 선택자
이 우선순위에 따라 점수 부여한 뒤 합산해 어떤 스타일 적용할지 결정하는 것
만약 합산 점수가 동일한 경우, 나중에 선언된 것이 적용

p { color: blue; } /* 요소 선택자 */
.text { color: red; } /* 클래스 선택자 */
#unique { color: green; } /* ID 선택자 */

<p id="unique" class="text">Hello, CSS!</p>

이 경우 p 요소는 명시도가 가장 높은 ID 선택자가 적용된 unique스타일을 따라 초록색으로 표시됨

명시도 높은 스타일 강제 덮어쓰려면?

!important 사용하면 가능
타일 규칙의 명시도를 무시하고 가장 높은 우선순위를 갖게 함
만약 동일 속성에 대해 여러 개의 !important 규칙이 존재하면, 그때는 일반적인 명시도 규칙 따르게 됨

ex - 기존 규칙 강제로 덮어쓸 수 있음

p { color: black !important; }

but,
!important는 과도하게 사용하면 유지보수 어려워 질 가능성 있어 최대한 필요한 경우만 사용해야 함