3

Вопрос скорее для профи, на удовлетворение моей любопытности.
Допустим у нас есть:

<div class="lvl-1">
  <h1 class="tit">TEST</h1>
  <p class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea maiores impedit magni <a href="#" class="url-con">animi</a> quos fugit ex odit non tenetur, doloribus doloremque cum accusamus, nisi eius!</p>
</div>

и допустим я хочу обратится через css к классу .url-con
я это могу сделать разными способами: .url-con или .lvl-1 > .con > .url-con или .con > .url-con... и т.д.
Зависит ли способ обращения к элементам на скорость обработки страницы?

1 ответ 1

4

Зависит, но разница настолько ничтожна, что никто ее не заметит, даже на старом по нынешним меркам железе.

Браузер обрабатывает селекторы, начиная с конца. В случае с .url-con - он найдет все ноды с таким классом, и применит к ним стили.

В случае с .con > .url-con браузер точно так же, как в первом случае, найдет все ноды с классом .url-con, а потом среди них оставит только те, у которых есть предок с классом .con. И применит к ним стили.

В случае с .lvl-1 > .con > .url-con:

  • Найдет все ноды с классом .url-con;
  • Из них оставит только ноды с предком с классом .con;
  • Из них оставит только ноды с предком с классом .lvl-1;
  • И применит к ним стили.
1
  • Большое спасибо)))
    – Ruslan
    4 мая 2017 в 16:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.