编写高效的CSS选择符

CSS选择符是从右到左进行匹配的

样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

  1. 避免使用通配规则
    除传统的通配选择符,相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到“通配规则”下。他推荐仅使用ID、类和标签选择符。

  2. 不要限定ID选择符
    在页面中指定的ID只能对应一个元素,所以没必要添加额外的限定符。

  3. 不要限定类选择符
    不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。

  4. 让规则越具体越好
    不要编写长选择符,最好创建一个类,并把他添加到合适的元素上。

  5. 避免使用后代选择符
    通常处理后代选择符的开销是最高的。

  6. 避免使用标签—子选择符
    如果有一个基于标签的子选择符,那么应该使用一个类来关联每个标签元素。

  7. 质疑子选择符的所有用途
    尽可能用具体的类代替他们。

  8. 依靠继承
    了解那些属性可以通过继承而来,然后避免对这些属性重复指定规则。继承属性列表参考:参考链接

参考自: 《高性能网站建设进阶指南》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值