RSS DEV 커뮤니티

CSS 특이성에 대해 구체적으로

스타일 충돌이 발생할 때 적용 우선순위를 결정하는 CSS 스타일링 우선순위는 특이성에 의존합니다. 특이성은 인라인 스타일, ID, 클래스, 요소 등을 나타내는 4자리 표기법으로 계산됩니다. 각 식별자는 점수를 기여하며, 더 높은 특이성이 스타일 충돌을 승리합니다. 쉼표를 사용하여 값을 구분하여 단순한 숫자 추가를 방지하는 이 시스템은 다수의 클래스가 있는 상황에서도 해석의 모호성을 피할 수 있습니다. `:is()` 및 `:where()` 선택자는 다중 요소 스타일링을 위한 향상된 복합 선택자 구문을 제공합니다. `:is()`의 특이성은 목록 내의 가장 특이한 요소에 의해 결정됩니다. `:where()`는 항상 0의 특이성을 가지며, 내용에 관계없이 특이성 조작을 허용하여 스타일 적용 제어의 유연성을 제공합니다. 이 기능은 코드 예측 가능성 및 스타일 제어를 향상시킵니다.
favicon
dev.to
Getting Specific About CSS Specificity