- В чем разница между
ul > li > a {...}
иul li a {...}
в CSS? - Какой из них более эффективен и почему?
Селекторы 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</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>