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

前端之家收集整理的这篇文章主要介绍了CSS选择器ul li a {…} vs ul> li> a {…}前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
> ul> gt有什么区别? li> CSS中的{…}和ul li a {…}
哪一个更有效率,为什么?

解决方法

“>”是 child selector

“”是descendant selector

不同的是,后裔可以是元素的孩子,或孩子的孩子的孩子或孩子的孩子的孩子的孩子。

子元素只是一个直接包含在父元素中的子元素:

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

对于这个例子,foo *将匹配< bar>和< baz>,而foo> *只会匹配< bar>。

至于你的第二个问题:

Which one is more efficient and why?

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

而不是担心微型优化,而是专注于编写对现有案例有意义的选择器。我经常使用>在为嵌套列表进行样式化时,选择器是重要的,因为区分列表的哪个级别的样式很重要。

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

猜你在找的CSS相关文章