Question

CSS中的ul > li > a {...}和ul li a {...}之间有什么区别？
哪一个更有效率，为什么？

Answer 1

“>”是child selector

不同之处在于后代可以是元素的子元素，或元素子元素的子元素或子元素的子元素 ad inifinitum 。

子元素只是直接包含在父元素中的元素：

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

对于此示例，foo *将匹配<bar>和<baz>，而foo > *只匹配<bar>。

至于你的第二个问题：

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

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

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

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

Answer 2

ul>li选择li为ul的直接子项的所有ul li，而li选择其中任何位置的所有ul（根据您的喜好下降）<ul> <li><span><a href='#'>Something</a></span></li> <li><a href='#'>or Other</a></li> </ul>

对于HTML：

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

和CSS：

Something

or Other的颜色将保持绿色，li>a将为红色

第2部分，你应该编写适合这种情况的规则，我认为速度差异会非常小，并且可能会因编写更多代码所涉及的额外字符而蒙上阴影，并且肯定会被所用的时间所掩盖。开发商要考虑它。

但是，根据经验，规则越具体，CSS引擎就越能找到要应用它的DOM元素，因此我希望li a比{{{1}}更快。 1}}因为DOM搜索可以提前缩短。这也意味着嵌套的锚没有使用该规则设置样式，这是你想要的吗？＆lt; ~~更相关的问题。

Answer 3

ul > li > a仅选择直接子项。在这种情况下，只会选择<a>中第一级<li>的第一级<ul>。

另一方面，

ul li a将在无序列表中的所有<a> - s中选择所有<li> - s

ul > li

的示例

＆＃13;

ul > li.bg {
  background: red;
}

＆＃13;

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

＆＃13;

如果您正在使用ul li - 所有li - s都会受到影响

UPDATE 因此，CSS选择器的效率会降低到更低效率的顺序：

ID，例如#header
类，例如.promo
类型，例如div
相邻的兄弟姐妹，例如h2 + p
儿童，例如li > ul
后裔，例如ul a
环球，即*
属性，例如[type="text"]
伪类/元素，例如a:hover

所以，最好的办法是使用children选择器而不只是descendant。但是，常规页面上的差异（没有数万个元素可以通过）可能完全可以忽略不计。

Answer 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;}

“＆gt;” 中 - 符号表示仅搜索子选择器（parentTag＆gt; childTag）

所以首先css规则将适用于所有链接（第一和第二）和第二条规则将适用于第一个链接

2）至于效率 - 我认为第二个会更快 - 就像JavaScript选择器一样。此规则从右到左阅读，这意味着当规则将通过浏览器解析时，它将获取页面上的所有链接： - 在第一种情况下，它将在页面上找到每个链接的所有父元素，并过滤存在父标记“ul”和“li”的所有链接 - 在第二种情况下，如果它是“li”标签，它将只检查链接的父节点然后 - ＆gt;检查“li”的父标签是否为“ul”

有点像这样的事情。希望我能正确地为你描述

Answer 5

回答你的第二个问题 - 性能受到影响 - 如果你使用那些选择器只有一个（没有嵌套）ul：

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

子选择器ul > li比ul li更高效，因为它更具体。浏览器遍历dom“从右到左”，所以当它找到li时，它会在子选择器的情况下查找任何ul作为父项，而它必须遍历整个dom树在后代选择器的情况下找到任何ul祖先

Answer 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>

CSS选择器ul li a {...} vs ul＆gt; li>一个 {...}

6 个答案: