Тестер CSS-селекторов
Проверяйте CSS-селекторы на вставленном HTML и смотрите каждый найденный элемент с разметкой и текстом. Использует querySelectorAll, поэтому результат совпадает с браузером.
Что такое Тестер CSS-селекторов?
Тестер запускает селектор на вставленном вами HTML и перечисляет каждый найденный элемент с его внешним HTML и текстовым содержимым. Он поддерживает всё, что поддерживает ваш браузер: от селекторов атрибутов до :not(), :is(), :has() и :nth-child().
Как пользоваться Тестер CSS-селекторов
- Введите CSS-селектор, например
nav li:not(.active) > a[href^="/"]. - Вставьте или отредактируйте HTML.
- Прочитайте число совпадений и подсвеченную разметку каждого совпадения.
- Скопируйте весь найденный HTML кнопкой копирования.
Пример
nav li:not(.active) > a[href^="/"] on the sample HTML
1 match: <a href="/blog" data-track="nav">Blog</a>
a[href] совпадает со всеми 4 ссылками в примере.
Когда использовать Тестер CSS-селекторов
Используйте для написания селекторов для правил CSS, автоматизации тестирования (Playwright, Cypress), веб-скрапинга или вызовов document.querySelector. Инструмент не применяет стили и не вычисляет специфичность, а динамические псевдоклассы вроде :hover в статичном документе никогда не совпадают.
Как работает Тестер CSS-селекторов
HTML разбирается в отдельный документ через DOMParser (скрипты не выполняются), а селектор передаётся в querySelectorAll(). Сопоставление поэтому в точности такое, как делает ваш браузер, включая уровень его поддержки новых возможностей Selectors Level 4. Недопустимые селекторы перехватываются и сообщаются. Показывается до 200 совпадений.
Распространенные Случаи Использования
- Проверить, что локатор Playwright совпадает ровно с одной кнопкой.
- Построить селектор скрапера для цен товаров.
- Изучить, как работают комбинаторы (>, +, ~) и :not().
- Проверить, поддерживает ли ваш браузер :has().
Часто Задаваемые Вопросы
Почему мой селектор ничего не находит на скопированной странице?
Страница может строить HTML средствами JavaScript. Вставьте отрисованный HTML из DevTools (Copy outerHTML), а не исходный код.
Поддерживается ли :has()?
Да, в текущих Chrome, Edge, Safari и Firefox. Тестер использует ваш браузер, поэтому в старых браузерах он будет считаться недопустимым.
Показывает ли он специфичность?
Нет, он показывает только, какие элементы совпадают.