有如下 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 的选择是不是效率更高?
1
sumhat 2015 年 4 月 28 日
如果可以加 ID 就尽量用 ID,不能的话,第三种较好。
|
2
whatisnew OP 还有一种写法:
div..container div.slide {} vs div..container div.wrapper div.slide {} 哪个好? |
3
whatisnew OP 学习到了 right to left 的语法分析
|
4
loading 2015 年 4 月 28 日 via Android
css效率文章到处都是,找篇好好看看。
|
6
Sivan 2015 年 4 月 28 日
后面两个效率都低,不要加 tag。
|
7
morethansean 2015 年 4 月 28 日
Sweating over the selectors used in modern browsers is futile.
对于 现代浏览器来说,基本上不用考虑选择器的效率问题。过多没用的选择器可能带来的影响更大一些。 你更需要关注的,应该是 css 属性的使用。例如 border-radius/box-shadow 等性能大户。 |
8
otakustay 2015 年 4 月 28 日
从效率上讲加tag效率只会更低……
|
9
loading 2015 年 4 月 28 日 via Android
tag 我记得性能反而会下降。
css 选择其实无所谓,js操作时才是性能大户。 |
10
Septembers 2015 年 4 月 28 日
|
11
Justineo 2015 年 5 月 21 日
Chrome 30 起都把 Selector Profiler 删掉了,就是为了让开发者别在这些几乎没有收益的「优化」上浪费时间。除非你真的遇到了性能瓶颈,否则根本没必要去优化这种地方。
|