В каком направлении проверяются селекторы CSS?

Question

Я помню, как какое-то время назад смотрел видео онлайн, в котором выступал инженер Yahoo, и в нем он упомянул, что селекторы CSS читаются браузером справа налево, а не слева направо. Значение #body .header .links a фактически вытянет все якоря на странице, фильтруя те, у которых есть родительский класс класса links, у которого есть родительский класс класса header, у которого есть родительский элемент с идентификатором body.

Я не могу найти видео, и мне было интересно, есть ли у кого-нибудь ссылки, подтверждающие это, или это не правильно? Разве это не значит, что что-то вроде #body .header .links li a на самом деле медленнее, чем просто сказать #body .links a? Предполагая, что оба работают на данной странице.

Answer 1

Я думаю, что эта статья блога идет в этом направлении: Упрощение селекторов CSS

Ключом к оптимизации селекторов CSS является сосредоточенность на крайнем правом селекторе, также называемом селектором клавиш (совпадение?). Вот намного более дорогой селектор: A.class0007 * {}. Хотя этот селектор может показаться более простым, браузер более подходит для сравнения. Поскольку браузер перемещается справа налево, он начинает с проверки всех элементов, которые соответствуют ключевому селектору «*». Это означает, что браузер должен попытаться сопоставить этот селектор со всеми элементами на странице. На этой диаграмме показана разница во времени загрузки тестовой страницы с использованием этого универсального селектора по сравнению с предыдущей тестовой страницей селектора-потомка.

Я еще не прочитал его подробно (он пришел ко мне в качестве рекомендации), но выглядит очень хорошо.

Answer 2

Когда браузер сопоставляет селекторы css, он проверяет, применимо ли каждое правило к определенному элементу. Поэтому естественно проверять селекторы справа налево.

Чтобы проверить, соответствует ли селектор #body .header .links a элементу, он сначала проверяет, является ли он элементом a, затем, если есть родительский элемент с классом links, тогда, если у этого элемента есть родительский элемент с классом header, то если этот элемент имеет родителя с идентификатором body.