입력을 붙여넣기
CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.
CSS 명시도 계산기
선택자 명시도 계산.
사용 방법
붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.
도구 실행
변환 또는 실행을 누르세요. 결과가 바로 나타납니다.
출력 확인
생성된 코드와 노트를 사용 전에 확인하세요.
복사해서 사용
결과를 복사해 프로젝트에 붙여넣으세요.
이 도구 소개
선택자의 고전적인 명시도 (a,b,c)를 계산해, DevTools를 열지 않고도 어떤 규칙이 우선하는지 확인할 수 있습니다. 판단 대상은 선택자 자체이며 선언 순서나 @layer는 반영하지 않습니다.
예제
예시 선택자는 요소와 클래스가 섞인, 오래된 내비게이션 CSS와 비슷한 형태입니다.
입력
nav.site-header .menu a.active출력
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2팁
!important를 자주 쓰게 된다면 진짜 문제는 쌓여 온 명시도 부채입니다.