CSS-селекторы — это ключ к точному отслеживанию контента. Узнайте, как определять и использовать CSS-селекторы, чтобы точно нацеливаться на контент, который хотите отслеживать.
Что такое CSS-селекторы?
CSS-селекторы — это шаблоны, которые используются для выбора элементов на веб-странице. В Trackr они говорят нашей системе, какую часть страницы нужно следить на предмет изменений.
Основные типы селекторов
- Селектор ID:
#product-price- Выбирает элемент с конкретным ID - Селектор класса:
.price-display- Выбирает элементы с определенным классом - Селектор элемента:
h1- Выбирает определенные HTML-элементы - Селектор атрибута:
[data-price]- Выбирает элементы с определенными атрибутами
Как найти CSS-селекторы
Способ 1: Расширение для браузера (самый простой)
Наше расширение для браузера автоматически генерирует CSS-селекторы для вас!
- Установи расширение Trackr для браузера
- Перейдите на страницу, которую хотите отслеживать
- Нажми на значок расширения и выбери нужный элемент
- CSS-селектор будет сгенерирован автоматически
Способ 2: Инструменты разработчика браузера
Чтобы вручную создать CSS-селектор:
- Щелкни правой кнопкой мыши элемент, который хочешь отслеживать
- Выбери «Проверить» или «Проверить элемент»
- В инструментах разработчика щелкните правой кнопкой мыши выделенный HTML-элемент
- Выбери «Копировать» → «Копировать селектор»
- Вставь селектор в Trackr
Предупреждение о селекторах, сгенерированных браузером
Селекторы, созданные браузером, могут быть слишком сложными и неустойчивыми. Они могут перестать работать, если структура страницы немного изменится. Подумайте о том, чтобы упростить их после копирования.
Распространенные шаблоны селекторов
Отслеживание цены
.product-price span.amount
Нацелен на сумму цены внутри контейнера цены продукта
Отслеживание названия/заголовка
h1.article-title
Нацелен на основной заголовок с определенным классом
Отслеживание наличия на складе
#availability-status
Следит за элементом с ID, который показывает, есть ли товар на складе
Отслеживание конкретного атрибута данных
[data-product-id="12345"] .price
Нацеливается на цену внутри элемента с конкретным атрибутом данных
Лучшие практики CSS-селекторов
Хорошие селекторы:
#price- Простой ID.product-title- Описательный класс[data-testid="price"]- Стабильный атрибут данных.main-content h1- Четкая иерархия
Избегайте таких:
div > div > span:nth-child(3)- Слишком конкретного.css-1x2y3z4- Автоматически создаваемые классыbody > div:nth-child(5)- Зависимые от положения
Рекомендации по выбору селекторов
- Лучше использовать идентификаторы и семантические имена классов, чем сложные пути
- Не используй селекторы, зависящие от позиции, такие как
:nth-child() - Используйте атрибуты данных, если они доступны — они стабильны
- Делайте селекторы как можно короче, но уникальными
- Протестируйте свой селектор на странице, прежде чем создавать задачу
Тестирование селекторов
Перед тем как создавать задачу отслеживания, убедитесь, что ваш CSS-селектор работает как надо:
Тест в консоли браузера
- Открой страницу, которую хочешь отслеживать
- Нажмите F12, чтобы открыть инструменты разработчика
- Перейдите на вкладку «Консоль»
- Введите:
document.querySelector('YOUR_SELECTOR_HERE') - Нажми Enter — если вернется элемент, значит твой селектор работает!
Совет от профессионала: несколько элементов
Если твой селектор подходит к нескольким элементам, используй document.querySelectorAll('YOUR_SELECTOR') , чтобы увидеть все совпадения. Возможно, тебе нужно сделать селектор более конкретным.
Устранение распространенных проблем
Селектор не находит контент
Контент может загружаться динамически с помощью JavaScript.
Решение: включите рендеринг браузера в настройках задачи
Селектор находит несколько элементов
Твой селектор слишком широкий и выбирает больше, чем один элемент.
Решение: добавь более конкретные классы или используй родительский элемент, чтобы сузить выбор
Селектор перестает работать после обновления сайта
Сайт изменил свою HTML-структуру или классы.
Решение: обнови свой селектор с помощью расширения браузера или инструментов разработчика
Справочник по селекторам
Основные селекторы
#id |
Элемент с ID |
.class |
Элемент с классом |
element |
Тип HTML-элемента |
[attr] |
Имеет атрибут |
Комбинаторы
A B |
B внутри A (потомок) |
A > B |
B — прямой потомок A |
A + B |
B после A (сосед) |
A.B |
A с классом B |
Дальнейшие шаги
Теперь, когда ты понял, как работают CSS-селекторы, узнай о типах контента, чтобы убедиться, что отслеживаемый контент правильно анализируется.
Узнайте о типах контента
