Селекторы CSS ul li a {...} vs ul> li> a {...}

Ответ 1

">" - это дочерний селектор

"" является селектор потомков

Отличие состоит в том, что потомок может быть дочерним элементом этого элемента или дочерним элементом дочернего элемента элемента или дочернего элемента дочернего объявления adifinitum.

Детский элемент - это просто тот, который содержится непосредственно в родительском элементе:

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

для этого примера foo * будет соответствовать <bar> и <baz>, тогда как foo > * будет соответствовать только <bar>.

Что касается вашего второго вопроса:

Какой из них более эффективен и почему?

Я не собираюсь отвечать на этот вопрос, поскольку он совершенно не имеет отношения к развитию. Механизмы рендеринга CSS настолько быстр, что почти никогда не было причины оптимизировать селектор CSS, чтобы сделать их как можно короче.

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

_{*, если это действительно проблема при рендеринге страницы, у вас, вероятно, слишком много элементов на странице или слишком много CSS. Затем вам нужно будет запустить несколько тестов, чтобы узнать, что представляет собой настоящая проблема.}

Ответ 2

ul>li выбирает все li, которые являются прямым дочерним элементом ul, тогда как ul li выбирает все li, которые находятся где угодно (спускаются настолько глубоко, насколько вам нравится) a ul

Для HTML:

<ul>
  <li><span><a href='#'>Something</a></span></li>
  <li><a href='#'>or Other</a></li>
</ul>

И CSS:

li a{ color: green; }
li>a{ color: red; }

Цвет Something останется зеленым, но or Other будет красным

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

Однако, как правило, чем конкретнее вы используете свои правила, тем быстрее механизмы CSS могут найти элементы DOM, к которым вы хотите применить их, поэтому я ожидаю, что li>a будет быстрее, чем li a, как поиск DOM может быть сокращен раньше. Это также означает, что вложенные якоря не имеют стиля с этим правилом, это то, что вы хотите? < ~~ гораздо более улокальный вопрос.

Ответ 3

ul > li > a выбирает только прямых детей. В этом случае будет выбран только первый уровень <a> первого уровня <li> внутри <ul>.

ul li a, с другой стороны, выберем ALL <a> -s во ВСЕХ <li> -s в неупорядоченном списке

Пример ul > li

ul > li.bg {
  background: red;
}

<ul>
  <li class="bg">affected</li>
  <li class="bg">affected</li>    
  <li>
    <ol>
      <li class="bg">NOT affected</li>
      <li class="bg">NOT affected</li>
    </ol>
  </li>
</ul>

Ответ 4

1), например, HTML-код:

<ul>
    <li>
        <a href="#">firstlink</a>
        <span><a href="#">second link&lt;/a>
    </li>
</ul>

и css правила:

1) ul li a {color:red;} 
2) ul > li > a {color:blue;}

" > " - символ означает, что он будет искать только дочерний селектор (parentTag > childTag)

поэтому первое правило css будет применяться ко всем ссылкам (первый и второй) и второе правило будет применяться к первой ссылке

2) Что касается эффективности - я думаю, что второй будет быстрее - как в случае с селекторами JavaScript. Это правило читается справа налево, это означает, что когда правило будет анализироваться браузером, он получает все ссылки на странице: - в первом случае он найдет все родительские элементы для каждой ссылки на странице и отфильтрует все ссылки, где существуют родительские теги "ul" и "li" , - во втором случае он будет проверять только родительский node ссылки, если он является тегом "li" , затем → проверить, является ли родительский тег "li" "ul"

что-то вроде этого. Надеюсь, я опишу все правильно для вас.

Ответ 5

чтобы ответить на ваш второй вопрос - на производительность повлияло влияние - если вы используете эти селекторы с одним (не вложенным) ul:

<ul>
    <li>jjj</li>
    <li>jjj</li>    
    <li>jjj</li>
</ul>

дочерний селектор ul > li более эффективен, чем ul li, потому что он более конкретный. браузер пересекает dom "справа налево", поэтому, когда он находит li, он ищет какой-либо ul в качестве родителя в случае дочернего селектора, в то время как он должен пересекать все дерево дерева, чтобы найти любых предков ul в случае селектора-потомка

Ответ 6

Здесь > a чтобы указать цвет для корня li.active.menu-item

# primary-menu> li.active.menu-item> a

#primary-menu>li.active.menu-item>a {
  color: #c19b66;
}

<ul id="primary-menu">
  <li class="active menu-item"><a>Coffee</a>
    <ul id="sub-menu">
      <li class="active menu-item"><a>aaa</a></li>
      <li class="menu-item"><a>bbb</a></li>
      <li class="menu-item"><a>ccc</a></li>
    </ul>
  </li>

  <li class="menu-item"><a>Tea</a></li>
  <li class="menu-item"><a>Coca Cola</a></li>
</ul>