CSS选择器问题:.class > ul > li和.class li哪个效率高?

国家战略忽悠局
  • 373

请教如下两种写法,哪种效率高?现在的实际开发中有必要考虑这些吗?

<div class="class">
    <ul>
        <li>...</li>
        ...
    </ul>
</div>
.class > ul > li {...}
.class li {...}
评论
阅读 3.1k
5 个回答

这个要根据不同的场景去判断,但有几个基本的原则应该知道:
1、原则是从选择器的右边到左边读取
2、越具体的关键选择器,其性能越高
所以实际这两种的效率都不是很高,效率最高的方法是给你需要的li节点加上类名
推荐你看看这几篇文章:
CSS选择器的优化
如何提升 CSS 选择器性能

问题重复了。

通常是第一种效率更高,而且没有歧义(第二种可能会应用到ol元素中的li上而第一种不会)

这个看你的应用场景了,如果li在class下很多层级,那就是第一种高,如果中间只有ul这一个层那就是第二种高,css的解析是从右往左解析的,如果是第一种就是先去找li再去找li上面的ul,然后才是.class;这样的话你其它类名下面有ul的话它也会去解析直到匹配到ul上面的.class才会停止

肯定是第一个效率高,第一个条件比较多,需要去搜索的单位比较少。

yangdong
  • 0
新手上路,请多包涵
宣传栏