도구 실행
CSS 선택자의 명시도 구성 요소와 가중치 점수를 분석하는 온라인 도구입니다. 입력창에 선택자 문자열을 입력하면 아이디, 클래스, 가상 클래스, 속성 선택자, 태그 요소, 가상 요소의 개수를 감지하여 네 가지 구성 요소로 분류합니다. 종합 명시도 점수는 각 구성 요소에 1000, 100, 10, 1의 가중치를 곱해 산출됩니다. 전체 선택자(*)는 명시도 계산에서 제외되며, 입력란이 비어 있거나 공백만 입력된 경우에는 모든 구성 요소와 총점이 0으로 표시됩니다. 스타일 충돌을 해결하고 복합 선택자의 우선순위를 검토할 때 유용합니다.
사용 방법
- 분석할 CSS 선택자 문자열을 선택자 입력란에 입력합니다.
- 실행 버튼을 눌러 명시도 분석을 진행합니다.
- 결과 영역에서 네 가지 구성 요소 수치와 환산된 총점을 확인합니다.
예시
- 아이디 선택자 '#header'를 입력하면 아이디 구성 요소 1개가 감지되어 높은 점수가 표시됩니다.
- 복합 선택자 'nav.menu ul li a:hover'를 입력하면 클래스, 가상 클래스, 태그 요소가 각각 계산되어 합산 점수로 나타납니다.
자주 묻는 질문
전체 선택자(*)를 입력하면 점수가 어떻게 계산됩니까?
전체 선택자(*)는 명시도 구성 요소에 반영되지 않으므로 점수 계산에서 제외됩니다.
입력란을 비워두고 실행하면 어떤 결과가 나타납니까?
입력란이 비어 있거나 공백만 포함된 경우 네 가지 구성 요소와 총점이 모두 0으로 표시됩니다.
클래스와 속성 선택자는 같은 가중치로 계산됩니까?
클래스 선택자, 속성 선택자, 가상 클래스는 모두 두 번째 명시도 구성 요소로 함께 집계됩니다.