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

CSS selectors ul li a {...} vs ul > li > a {...}

提问by Inquisitive

1. What is the difference between ul > li > a {...}and ul li a {...}in CSS?
2. Which one is more efficient and why?

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

回答by zzzzBov

">" is the child selector

" >" 是子选择器

"" 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 *would match <bar>and <baz>, whereas foo > *would only match <bar>.

在这个例子中，foo *将匹配<bar>和<baz>，而foo > *只匹配<bar>。

As for your second question:

至于你的第二个问题：

Which one is more efficient and why?

哪一种更有效，为什么？

I'm not actually going to answer this question as it's completely irrelevant to development. CSS rendering engines are so fast that there is almost never* a reason to optimize CSS selectors beyond making them as short as possible.

我实际上不会回答这个问题，因为它与开发完全无关。CSS 渲染引擎如此之快，以至于除了让 CSS 选择器尽可能短之外，几乎没有理由优化 CSS 选择器。

Instead of worrying about micro-optimizations, focus on writing selectors that make sense for the case at hand. I often use >selectors when styling nested lists, because it's important to distinguish which level of the list is being styled.

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

_{* if it genuinely is an issue in rendering the page, you've probably got too many elements on the page, or too much CSS. Then you'll have to run some tests to see what the actual issue is.}

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

回答by Billy Moon

ul>liselects all lithat are a direct child of ulwhereas ul liselects all lithat are anywhere within (descending as deep as you like) a ul

ul>li选择所有li是其直接子级的，ul而ul li选择所有li位于（下降到你喜欢的深度）aul

For HTML:

对于 HTML：

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

And CSS:

和 CSS：

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

The colour of Somethingwill remain green but or Otherwill be red

的颜色Something将保持绿色但or Other将是红色

Part 2, you should write the rule to be appropriate to the situation, I think the speed difference would be incredibly small, and probably overshadowed by the extra characters involved in writing more code, and definitely overshadowed by the time taken by the developer to think about it.

第 2 部分，您应该根据情况编写规则，我认为速度差异会非常小，并且可能会被编写更多代码所涉及的额外字符所掩盖，并且肯定会被开发人员思考所花费的时间所掩盖关于它。

However, as a rule of thumb, the more specific you are with your rules, the faster the CSS engines can locate the DOM elements you want to apply it to, so I expect li>ais faster than li aas the DOM search can be cut short earlier. It also means that nested anchors are not styled with that rule, is that what you want? <~~ much more pertinent question.

但是，根据经验，您的规则越具体，CSS 引擎就能越快地定位您想要应用它的 DOM 元素，所以我希望li>a比li aDOM 搜索可以更早地缩短更快。这也意味着嵌套锚点的样式不符合该规则，这是您想要的吗？<~~更相关的问题。

回答by Zoltan Toth

ul > li > aselects only the direct children. In this case only the first level <a>of the first level <li>inside the <ul>will be selected.

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

ul li aon the other hand will select ALL <a>-s in ALL <li>-s in the unordered list

ul li a另一方面将在无序列表<a>中的 ALL <li>-s 中选择 ALL -s

Example of ul > li

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

if you'd be using ul li- ALL of the li-s would be affected

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

UPDATEThe order of more to less efficient CSS selectors goes thus:

更新效率高到低的 CSS 选择器的顺序是这样的：

• ID, e.g.#header
• Class, e.g. .promo
• Type, e.g. div
• Adjacent sibling, e.g. h2 + p
• Child, e.g. li > ul
• Descendant, e.g. ul a
• Universal, i.e. *
• Attribute, e.g. [type="text"]
• Pseudo-classes/-elements, e.g. a:hover

• 身，例如#header
• 类，例如 .promo
• 类型，例如 div
• 相邻的兄弟姐妹，例如 h2 + p
• 孩子，例如 li > ul
• 后代，例如 ul a
• 通用，即 *
• 属性，例如 [type="text"]
• 伪类/元素，例如 a:hover

So your better bet is to use the childrenselector instead of just descendant. However the difference on a regular page (without tens of thousands elements to go through) might be absolutely negligible.

所以你更好的选择是使用children选择器而不是descendant. 然而，普通页面上的差异（没有数万个元素需要浏览）可能绝对可以忽略不计。

回答by VitVad

1) for example HTML code:

1）例如HTML代码：

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

and css rules:

和CSS规则：

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

">" - symbol mean that that will be searching only child selector (parentTag > childTag)

">" - 符号表示将只搜索子选择器 (parentTag > childTag)

so first css rule will apply to all links (first and second) and second rule will apply anly to first link

所以第一个 css 规则将适用于所有链接（第一个和第二个），第二个规则将仅适用于第一个链接

2) As for efficiency - I think second will be more fast - as in case with JavaScript selectors. This rule read from right to left, this mean that when rule will parse by browser, it get all links on page: - in first case it will find all parent elements for each link on page and filter all links where exist parent tags "ul" and "li" - in second case it will check only parent node of link if it is "li" tag then -> check if parent tag of "li" is "ul"

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

some thing like this. Hope I describe all properly for you

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

回答by Abdullah Tahan

Here > ato specifiy the color for root of li.active.menu-item

在这里> a指定根的颜色li.active.menu-item

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

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

回答by Luca

to answer to your second question - performance IS affected - if you are using those selectors with a single (no nested) ul:

回答您的第二个问题 - 性能受到影响 - 如果您使用具有单个（无嵌套）ul 的选择器：

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

the child selector ul > liis more performant than ul libecause it is more specific. the browser traverse the dom "right to left", so when it finds a liit then looks for a any ulas a parent in the case of a child selector, while it has to traverse the whole dom tree to find any ulancestors in case of the descendant selector

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