CSS选择器ul li a {...} vs ul> li> a {...}

Question

1. CSS ul > li > a {...}和ul li a {...}CSS有什么区别？
2. 哪一个更有效率,为什么？

Answer 1

" >"是子选择器

" " 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:

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

for this example, foo *将匹配<bar>和<baz>,而foo > *只会匹配<bar>.

至于你的第二个问题:

哪一个更有效率,为什么？

我实际上不会回答这个问题,因为它与开发完全无关.CSS渲染引擎非常快,几乎从来没有理由优化CSS选择器,除了使它们尽可能短.

而不是担心微观优化,而是专注于编写对手头案例有意义的选择器.>在设计嵌套列表时,我经常使用选择器,因为区分列表的哪个级别是很重要的.

_{*如果它真的是渲染页面的问题,你可能在页面上有太多的元素,或者太多的CSS.然后你必须运行一些测试来看看实际问题是什么.}

Answer 2

ul>li选择所有li直接子项ul,然后ul li选择所有li位于其中的任何位置(根据您的喜好下降)aul

对于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搜索更快.这也意味着嵌套的锚没有使用该规则设置样式,这是你想要的吗？<~~更多相关的问题.

Answer 3

ul > li > a只选择直接的孩子.在这种情况下,只有第一电平<a>的第一电平的<li>内部<ul>将被选中.

ul li a另一方面,将在无序列表中选择ALL <a>-s中的ALL <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.但是,常规页面上的差异(没有数万个元素可以通过)可能完全可以忽略不计.