CSS 명시도 계산기 - Free Online Tool | PivaBox

CSS 선택자 명시도 계산 — 시각적 (a, b, c) 분석, 비교 모드 및 선택자 설명 제공

CSS 명시도 계산기 사용 방법

1. 입력 필드에 CSS 선택자를 입력하거나 붙여넣기 — 예: ul li, .class, #id, .class1.class2, 또는 div#id.class 같은 복합 선택자
2. (a, b, c) 시각적 분석으로 표시되는 명시도 결과 확인 — ID(a), 클래스/속성/의사 클래스(b), 요소/의사 요소(c) — 총 값은 a*100 + b*10 + c로 계산됩니다
3. 선택적으로 비교 모드를 확장하여 두 번째 선택자를 입력하고 CSS 캐스케이드에서 어느 것이 승리하는지 확인하세요. 인라인 스타일과 !important 참고 사항도 확인하세요.

Frequently Asked Questions

CSS 명시도 계산기는 무료인가요?

네, PivaBox CSS 명시도 계산기는 완전히 무료로 사용할 수 있습니다. 요금, 구독, 숨겨진 비용이 전혀 없습니다. 모든 계산은 브라우저에서 로컬로 실행됩니다.

명시도는 어떻게 계산되나요?

명시도는 3성분 값 (a, b, c)으로 계산됩니다. <strong>a</strong>는 ID 선택자, <strong>b</strong>는 클래스 선택자·속성 선택자·의사 클래스, <strong>c</strong>는 요소 선택자·의사 요소를 셉니다. 총 값은 a*100 + b*10 + c입니다. 값이 높을수록 캐스케이드에서 우선합니다.

!important와 인라인 스타일은 어떻게 되나요?

인라인 스타일(HTML 요소의 style 속성)은 명시도와 관계없이 항상 스타일시트 규칙을 덮어씁니다. !important 플래그는 일반 명시도 규칙을 덮어씁니다 — !important 규칙은 비 !important 규칙을 이깁니다. 두 !important 규칙이 충돌할 경우 일반 명시도로 승자가 결정됩니다. 이 도구에는 두 가지 엣지 케이스를 설명하는 참고 사항이 포함되어 있습니다.