编写高效的CSS选择器
2016-04-15 14:08
405 查看
CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。有鉴于此,不同的样式系统引擎可能会拥有完全不同的表现和行为,特别是 Gecko 与 WebKit, 这两个引擎都是开源项目,实现了类似的算法,具有极其相近的优缺点。因此下面介绍的小技巧对于真实世界的 Web 文档将会十分有用。
ID 规则 (key selector 为id)
Class 规则(key selector 为class)
标签规则(key selector 为 标签)
通用规则(除了三面之外都属于通用规则,包括[hidden=’true’])
关键选择器(key selector)。选择器的最后面的部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的祖先元素)。
关键选择器为 img、 p 和 title。
规则过滤是你需要学习的最基础的概念。分类存在的意义就是过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。
这就是能够极大提高性能的关键。对于一个给定的元素,需要匹配的规则越少,样式的解析就会越快。
举个例子,如果一个元素拥有一个 ID,那么只有匹配该 ID 的 ID 规则才会被选中。同理,只有当 Class 规则中的 class 出现在元素上时该规则才被检查。只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。
样式系统如何拆分规则
样式系统将规则拆分成四个主要类别:ID 规则 (key selector 为id)
Class 规则(key selector 为class)
标签规则(key selector 为 标签)
通用规则(除了三面之外都属于通用规则,包括[hidden=’true’])
关键选择器(key selector)。选择器的最后面的部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的祖先元素)。
a img, div > p, h1 + [title] { … }
关键选择器为 img、 p 和 title。
样式系统如何匹配规则
样式系统从关键选择器开始匹配规则,然后左移(查找规则选择器的任何祖先元素)。只要选择器的子树(substree)一直在检查,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃该条规则。规则过滤是你需要学习的最基础的概念。分类存在的意义就是过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。
这就是能够极大提高性能的关键。对于一个给定的元素,需要匹配的规则越少,样式的解析就会越快。
举个例子,如果一个元素拥有一个 ID,那么只有匹配该 ID 的 ID 规则才会被选中。同理,只有当 Class 规则中的 class 出现在元素上时该规则才被检查。只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。
高效 CSS 指南
避免通用规则
请确保规则不以通用类型选择器作为结束!不用标签名或classes来限定 ID 规则
不要用标签名限定 class 规则
尽量使用最具体的类别
避免后代选择器
标签分类的规则不要包含子选择器
在使用子选择器的地方想想为什么
依赖继承
使用 -moz-image-region!
使用局部样式表
如非必要则避免特定浏览器的渲染特征
本文内容主要来自MDN中的CSS开发指南相关文章推荐
- CSS 代码片段
- CSS中的position属性
- vs2015web工程中的html引用压缩后css后无法智能提示的问题解决
- 简单实现仿某宝地址选择三级联动样式
- 手机web——自适应网页设计(html/css控制)
- CSS画猪
- html和css学习二
- css隐藏页面元素方式
- CSS控制文本的长度,超过一行显示省略号
- CSS 样式表小结
- GitHub倡导的CSS编写风格及文件目录部署指南
- CSS中样式 display 属性 inline,block及inline-block
- CSS类及ID中的命名规则
- css input[type=file] 样式美化,input上传按钮美化
- CSS实现垂直居中的常用方法
- CSS3盒模型-box-shadow详细解析
- win7中VS2010中安装CSS3.0问题解决方法
- CSS弹性盒子Flexbox布局详解
- 34_水平ProgressBar样式
- 勤能补挫-简单But易错的JS&CSS问题总结