CSS Селекторы
CSS Селекторы
Селекторный движок разбирает текст селектора CSS в структурированную форму и оценивает его относительно деревьев DOM. Он поддерживает как прямые запросы, так и сопоставление правил каскада.
Запуск селекторов
select() оценивает селектор относительно дерева и возвращает совпадения; element_matches() проверяет отдельный элемент. Оба принимают стандартный синтаксис селекторов — тип, класс, id, атрибут и псевдокласс, включая составные и сложные комбинации.
Структуры разобранных селекторов
parse() создает SelectorList из ComplexSelector и CompoundSelector записей, построенных из TypeSelector, ClassSelector, IDSelector, AttributeSelector (с AttributeOperator), UniversalSelector и Combinator частей.
Псевдоклассы
Функциональные псевдоклассы моделируются явно: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, и структурные варианты nth-child через NthFilteredChildPseudoClass с NthArgument.
Specificity
specificity() вычисляет стандартный трёхкомпонентный кортеж для селектора, а max_specificity() сокращает список; match() связывает разбор и оценку вместе. Это те же значения, которые использует каскад, поэтому результаты запросов и вычисленные стили всегда согласуются.
Советы и лучшие практики
- Используйте
element_matches()внутри фильтров вместо повторного запускаselect()для каждого элемента - Разберите один раз и переиспользуйте
SelectorList, когда один и тот же селектор применяется к множеству деревьев - Когда правило неожиданно теряет каскад, сравните значения
specificity()напрямую
Распространённые проблемы
| Проблема | Причина | Исправление |
|---|---|---|
| Селектор не совпадает ни с чем | Синтаксическая ошибка в тексте селектора | parse() вызывает через syntax_error — проверьте сообщение |
| Связи одинаковой специфичности решаются «неправильно» | Зависимость от порядка | Поздние правила выигрывают в случае равенства; проверьте порядок правил. |
:is() vs :where() путаница | :where() вносит нулевую специфичность | Выберите в соответствии с предполагаемым весом каскада |
FAQ
Как проверить один элемент на соответствие селектору?
element_matches() — он возвращает булево значение без сканирования дерева.
Как рассчитывается специфичность?
specificity() возвращает стандартный кортеж компонентов (id, class, type); группы :where() вносят ноль.
Какие псевдоклассы поддерживаются?
Структурированные формы в API: :is(), :where(), :has(), :not() со сложными аргументами и структурные селекторы в стиле nth-child.
API Reference Сводка
| Класс/Метод | Описание: |
|---|---|
select | Оценить селектор относительно дерева |
element_matches | Проверить один элемент |
parse | Разобрать текст селектора в SelectorList |
specificity | Вычислить кортеж специфичности |
HasPseudoClass | Структурированная форма :has() |
AttributeSelector | Сопоставитель атрибутов с операторами |