CSS选择器ul li a {...} vs ul> li>一个 {...} [英] CSS selectors ul li a {...} vs ul > li > a {...}

问题描述

1. ul> li> CSS中的{...} 和 ul li a {...} ？


2. 一个更高效，为什么？

推荐答案

/ code>是子选择器

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

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

for this example, foo * would match <bar> and <baz>, whereas foo > * would only match <bar>.

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

Which one is more efficient and why?

我实际上不会回答这个问题，因为它与开发完全无关。 CSS渲染引擎是如此之快，以至于几乎从来没有*优化CSS选择器的原因，使它们尽可能短。

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.

而不是担心微优化，焦点写选择器对于手头的情况有意义。在对嵌套列表进行样式时，我经常使用> 选择器，因为区分列表中的哪个级别是非常重要的。

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.

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

这篇关于CSS选择器ul li a {...} vs ul> li>一个 {...}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！