Селекторы CSS ул ли а {...} против ул> ли> в {…}

  1. в чем разница между ul > li > a {...} и ul li a {...} в CSS?
  2. какой из них более эффективный и почему?
33
css css-selectors

5 ответов

">" - это ребенок селектор

"" is the descendant selector

The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.

A child element is simply one that is directly contained within the parent element:

for this example, foo * будет соответствовать <bar> и <baz>, а foo > * будет соответствовать только <bar>.

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

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

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

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

* если это действительно проблема при рендеринге страницы, у вас, вероятно, слишком много элементов на странице или слишком много CSS. Тогда вам придется провести несколько тестов, чтобы увидеть какова реальная проблема.

53

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 может быть прерван ранее. Это также означает, что вложенные якоря не стилизованы с этим правилом, это то, что вы хотите? гораздо более уместный вопрос.

13

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

ul li a С другой стороны будет выбрать все <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>

если бы вы использовали ul li - все li-S могут быть затронуты

обновление Порядок от более до менее эффективных селекторов CSS идет следующим образом:

  • ID, например,#header
  • класса, например,.promo
  • тип, например,div
  • рядом брат, например,h2 + p
  • ребенок, например,li > ul
  • потомок, например,ul a
  • универсальный, то есть *
    • , например,[type="text"]
  • псевдо-классы/-элементов, например, a:hover

поэтому лучше использовать children селектор, а не просто descendant. Однако разница на обычной странице (без десятков тысяч элементов) может быть абсолютно незначительной.

9

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" - во втором случае он будет проверять только родительский узел ссылки, если это тег "li", то - > проверьте, является ли Родительский тег "li" "ul"

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

1

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

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

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

0