Css обладает большим списком различных селекторов и, как ожидалось, каждый из них по разному влияет на скорость прогрузки страницы. Разница не сильно будет заметна на одностраничных проектах, но при вёрстке крупного проекта важна малейшая деталь, которая поможет увеличить скорость прогрузки.

Но перед тем как начать сравнивать селекторы между собой стоит сначала заострить своё внимание на том, как браузеры считывают селекторы. Первым под их взор попадает тот селектор, который стоит правее всех, например:

#left .class p

Изначально браузер начнёт искать все тэги p. После чего он начнёт отсеевать, оставляя только те которые вложены в .class. И только после этого он начнёт искать те p которые имеют родителя .class, которые в свою очередь вложены в #left. Из этого следует, что чем короче селектор тем быстрее скорость загрузки.

Сравнение селекторов

Сортируя селекторы по скорости прогрузки можно составить своеобразный рейтинг:

1. Лидером этого рейтинга будет селектор идентификатора. Он обладает самым маленьким временем прогрузки и записывается в виде #id.
2. Следом за ним, на небольшом расстоянии, идёт селектор класса .class.
3. Тройку лидеров замыкают селекторы типа, такие как a, div, ul и т.д.
4. Следом за ними идут более медленные селекторы, такие как сестринского элемента p+p, селектор дочернего элемента p>span, селектор потомка div p, универсальный *, селектор атрибута input[href="/main"] и замыкают селекторы псевдоклассов и псевдоэлементов li:nth-child(1) и т.д.

Советы

1. Если вам, при верстке вашего проекта, нужна хорошая скорость прогрузки страницы то вам следует отказаться от универсального селектора.
2. Не стоит использовать тэги в сочетании с селектором идентификатором или селектором класса:
   

   p#left {
      float:left;
   }

   
   Вполне достаточно будет записи вида:
   

   #left {
      float:left;
   }

3. Не использовать медленные селекторы с #id
   

   .class#left{
      float:left;
   }

   
   Можно вполне обойтись записью:
   

   #left{
      float:left;
   }

4. По возможности максимально уменьшить использование каскадов или селекторов тэгов, такие как:
   

   div p  {
      color: #000;
   }

   
   При грамотной вёрстке можно обойтись записью:
   

   .adress {
      color: #000;
   }