关于 css 选择器，效率

[whatisnew]

有如下 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 的选择是不是效率更高？

[sumhat]

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

[whatisnew]

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

[whatisnew]

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

[loading]

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

[whatisnew]

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

[Sivan]

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

[morethansean]

Sweating over the selectors used in modern browsers is futile.

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

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

[otakustay]

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

[loading]

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

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

[Septembers]

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

[Justineo]

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