您的位置:首页 > Web前端 > CSS

编写高效的 CSS 选择器

2015-04-20 17:06 375 查看
1. css选择器

CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下:

ID选择器 比如#header
类选择器 比如.promo
元素选择器 比如 div
兄弟选择器 比如 h2 + p
子选择器 比如 li > ul
后代选择器 比如 ul a 7. 通用选择器 比如 *
属性选择器 比如 type = “text”
伪类/伪元素选择器 比如 a:hover
甚至有时候id并不比class快很多,差不多的.

2. 组合选择器

从右开始,以它的方式回溯dom树,这其实比从顶部开始查找要高效很多

3. 关键选择器

最右侧的选择器为关键选择器

这就是为什么我对选择器的性能如此感兴趣的原因了:必须在web 标准最佳实践和速度之间的保持平衡。

4. 过度限制选择器

拥有明确选择器的好处就是可以避免过度限制选择器,如下是一个过度限制的实例

html body .wrapper #content a {}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: