关于 css 选择器，效率

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 4059 days ago, the information mentioned may be changed or developed.

有如下 html

<div class="container">
    <div class="wrapper">
        <div class="slide">No.1</div>
        <div class="slide">No.2</div>
        <div class="slide">No.3</div>
    </div>
</div>

css 选择 class slide

/* 不加 tag 的选择 */
.container .wrapper .slide {}
/* 加 tag 的选择，请问以下这种写法是不是比上面这种效率要高？ */
div..container div.wrapper div.slide {}
/* 还有这种，是不是效率更高？ */
div..container > div.wrapper > div.slide {}

请问单纯效率的角度来说，加 tag 的选择是不是效率更高？

div

class=

slide

11 replies • 2015-05-21 20:10:25 +08:00

sumhat

Apr 28, 2015

如果可以加 ID 就尽量用 ID，不能的话，第三种较好。

whatisnew

Apr 28, 2015

还有一种写法：
div..container div.slide {} vs div..container div.wrapper div.slide {} 哪个好？

whatisnew

Apr 28, 2015

学习到了 right to left 的语法分析

loading

Apr 28, 2015 via Android

css效率文章到处都是，找篇好好看看。

whatisnew

Apr 28, 2015

@loading 看了一些，学习到了 right to left 解决了我所有的疑问

Sivan

Apr 28, 2015

后面两个效率都低，不要加 tag。

morethansean

Apr 28, 2015

Sweating over the selectors used in modern browsers is futile.

对于现代浏览器来说，基本上不用考虑选择器的效率问题。过多没用的选择器可能带来的影响更大一些。

你更需要关注的，应该是 css 属性的使用。例如 border-radius/box-shadow 等性能大户。

otakustay

Apr 28, 2015

从效率上讲加tag效率只会更低……

loading

Apr 28, 2015 via Android

tag 我记得性能反而会下降。

css 选择其实无所谓，js操作时才是性能大户。

Septembers

Apr 28, 2015

@morethansean +1
see http://www.web-tinker.com/article/20816.html

Justineo

May 21, 2015

Chrome 30 起都把 Selector Profiler 删掉了，就是为了让开发者别在这些几乎没有收益的「优化」上浪费时间。除非你真的遇到了性能瓶颈，否则根本没必要去优化这种地方。