Калькулятор специфичности CSS
Рассчитайте специфичность CSS-селектора по компонентам и числовому баллу.
Запустить инструмент
Калькулятор специфичности CSS помогает быстро разобрать вес селектора перед проверкой каскада стилей. Введите селектор, например `#header`, `.card.active` или составную комбинацию правил, и получите четыре компонента специфичности, числовой балл и точное представление исходного текста. Идентификаторы влияют на первый компонент, классы, атрибуты и псевдоклассы увеличивают второй компонент, а псевдоэлементы и обнаруженные селекторы тегов влияют на третий компонент. Общий балл вычисляется с весовыми коэффициентами 1000, 100, 10 и 1 для каждого уровня. Если оставить поле пустым или ввести только пробелы, инструмент вернет нулевые значения для всех четырех компонентов и нулевой итоговый балл. Универсальный селектор звездочка не добавляет веса правилу. Распознавание синтаксиса опирается на встроенные шаблоны, поэтому сложные нестандартные конструкции следует оценивать с учетом этих правил. Инструмент удобен для отладки конфликтов стилей, проверки приоритета правил и анализа сложных селекторов в таблицах стилей.
Инструкция
- Введите селектор CSS в поле «Селектор».
- Запустите расчет и сравните четыре компонента специфичности с числовым баллом.
- Используйте исходное представление селектора, чтобы убедиться, что проверяется именно введенный текст.
- Для пустого значения учитывайте нулевые компоненты, нулевой балл и пустое представление селектора.
- Помните, что распознавание основано на шаблонах реализации и не охватывает все возможные конструкции селекторов CSS.
Примеры
- Введите `#header` и получите компоненты специфичности `[1, 0, 0, 0]` и числовой балл 1000.
- Проверьте составной селектор `.menu li:hover`: инструмент подсчитает классы, псевдоклассы и обнаруженные селекторы элементов, а также вернет исходный текст селектора.
Частые вопросы
Что показывает калькулятор специфичности CSS?
Специфичность CSS представлена четырьмя компонентами. Идентификаторы учитываются в первом компоненте, классы, атрибуты и псевдоклассы во втором, а псевдоэлементы и обнаруженные селекторы элементов в третьем.
Можно ли оставить поле пустым?
Поле ввода необязательное. Пустая или состоящая только из пробелов строка возвращает четыре нулевых компонента, нулевой балл и пустое представление селектора.
Как пользоваться инструментом?
Введите селектор в поле и запустите расчет. В результате отображаются компоненты специфичности, числовой балл и представление введенного текста.
Учитываются ли все конструкции CSS-селекторов?
Универсальный селектор не учитывается. Подсчет выполняется по шаблонам, которые распознает реализация, поэтому результат не следует считать полным разбором любого возможного синтаксиса селекторов CSS.