关于 css 选择器，效率

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3498 天前的主题，其中的信息可能已经有所发展或是发生改变。

有如下 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 条回复 • 2015-05-21 20:10:25 +08:00

sumhat

2015-04-28 06:00:22 +08:00

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

whatisnew

2015-04-28 06:03:17 +08:00

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

whatisnew

2015-04-28 06:14:34 +08:00

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

loading

2015-04-28 06:50:46 +08:00 via Android

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

whatisnew

2015-04-28 08:00:04 +08:00

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

Sivan

2015-04-28 10:35:13 +08:00

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

morethansean

2015-04-28 10:49:21 +08:00

Sweating over the selectors used in modern browsers is futile.

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

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

otakustay

2015-04-28 12:06:42 +08:00

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

loading

2015-04-28 12:09:27 +08:00 via Android

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

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

Septembers

2015-04-28 14:01:01 +08:00

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

Justineo

2015-05-21 20:10:25 +08:00

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