CSS 선택자와 우선순위

개념 설명

CSS 선택자의 다양한 유형과 스타일 충돌 시 우선순위 결정 규칙.

핵심 포인트

• 우선순위: 인라인(1000) > ID(100) > 클래스/속성/가상(10) > 태그(1)
• !important는 모든 우선순위를 무시하지만 유지보수에 해로움
• CSS Specificity 계산: a-b-c-d 형태로 점수 계산
• 동일 우선순위일 때 마지막에 선언된 규칙이 적용
• 선택자 성능: ID > 클래스 > 속성 > 태그 순으로 뿠링

예시 코드

/* 우선순위 비교 */
#header .nav-item      /* 110: ID(100) + 클래스(10) */
.nav .nav-item         /* 20: 클래스(10) + 클래스(10) */
.nav-item              /* 10: 클래스(10) */
div                    /* 1: 태그(1) */