编写高效的CSS选择器

CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。有鉴于此,不同的样式系统引擎可能会拥有完全不同的表现和行为,特别是 Gecko 与 WebKit, 这两个引擎都是开源项目,实现了类似的算法,具有极其相近的优缺点。因此下面介绍的小技巧对于真实世界的 Web 文档将会十分有用。

样式系统如何拆分规则

样式系统将规则拆分成四个主要类别:

  • 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开发指南

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值