CSS: это делает "ul> li" быстрее, чем "ul li"?

Question

Использование «>» вместо «» делает рендеринг быстрее, как я слышал от нескольких людей?

.slide:hover > div > span {
  border-color: #c8c8c8;
}

OR

.slide:hover div span {
  border-color: #c8c8c8;
}

Большое спасибо!

---

обновление: вопрос

есть ли какие-либо проблемы с надежностью?

Answer 1

Вы должны очень серьезно пересмотреть возможность слушать людей, которые говорят вам подобные вещи.

Разница совершенно незначительна при лучше . Никто не должен тратить время, энергию или умственные способности на такие вещи. Это не полезная оптимизация. Не попадайтесь в ловушку преждевременной оптимизации, особенно для динамического языка, такого как HTML / CSS.

Напишите код, понятный, поддерживаемый и функциональный сначала , прежде чем беспокоиться о чем-либо еще.
Если ul > li выглядит для вас яснее, чем ul li, напишите это так. Если нет, не надо. Сохраняйте это простым.

Answer 2

.slide:hover > div > span на эффективнее .slide:hover div span.

Однако вы никогда не заметите разницу со страницами среднего размера.

Если бы вы использовали селектор дочерних элементов вместо селектора потомков повсюду в вашей таблице стилей для действительно пугающей массивной / сложной страницы, вы могли бы сократить заметную часть времени рендеринга (см. Комментарий от @Борис Збарский).На страницах среднего размера вы можете сбрить за несколько миллисекунд .

Есть один недостаток использования Child Selector - IE6 его не поддерживает.

Для 99%сайтов, поддержка IE6 не является проблемой, но некоторые люди все еще используют ее:

http://ie6countdown.com/

Answer 3

Что быстрее?

Как говорили Коди и Тридцать, теоретически использование > должно быть быстрее, но даже стилизация для IE6 - это пустая трата времени, чем стилизация для производительности,Браузеры достаточно быстрые ;доверяйте своим браузерам , а не людям , которые вам это говорят, особенно тем, кто не предоставляет browser тестов для подтверждения своих утверждений.

есть ли какие-нибудь проблемы с надежностью? 1011 *

Конечно.Помимо того, что IE6 вообще не поддерживает >, как упоминается в тридцати точках, существует также разница в сопоставляемых элементах, поскольку > и комбинаторы пробелов выбирают разные вещи:

<section class="slide">
  <div>
    <span></span>   <!-- [1] -->
    <div>
      <span></span> <!-- [2] -->
    </div>
  </div>
  <div>
    <p>
      <span></span> <!-- [3] -->
    </p>
  </div>
</section>

Что выбрано, а что нет:

1. Выбирается обоими селекторами
   Этот span является потомком div, который является потомком элемента с классом slide.Поскольку span является потомком div, он также является потомком div.Аналогично для div и его .slide родителя / предка.

   При наведении на элемент .slide выбирается span.Применяется второе правило, поскольку оба селектора имеют одинаковую специфичность, но второй, ну, в общем, идет вторым.

2. Выбирается только по .slide:hover div span
   Этот span находится в div, , но его родительский элемент div находится в другом div, который не имеет класса slide.Поэтому первый селектор не находит этот элемент.

   Внутренний родительский элемент div, однако, является внуком элемента .slide.Независимо от глубины, он все равно в некотором роде является потомком .slide (он содержится где-то внутри него).

   При наведении на элемент .slide этот span выбирается.Применяется второе правило, поскольку оно соответствует только одному.

3. Выбирается только .slide:hover div span
   Родитель этого span являетсяp элемент, а не div.Достаточно просто;первый селектор не находит этот элемент.

   Однако span - это внук элемента div, который сам находится внутри .slide.

   При зависанииэлемент .slide, этот span выбран.Применяемое правило - второе, потому что оно соответствует только одному.

И последнее: во всех трех сценариях вы обнаружите, что применяются правила только во втором селекторе. Это чисто случайно ;различия в том, как поддерживающие браузеры ищут элементы для соответствия, все еще реальны.