提高CSS性能

1、选择器

• 了解CSS的查找匹配原理，让CSS更简洁、高效
• 使用高效率的CSS选择器
• 如何使CSS渲染更高效

总结

不要在ID选择器前使用标签名 一般写法：div#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red

解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red { color: red; }
span.red { color:#ff00ff; }
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

尽量少使用层级关系
一般写法：#divBox p .red { ... }
更好写法：.red { ... }

使用class代替层级关系
一般写法：#divBox ul li a { display: block; }
更好写法：.block{display:block;}

本文非原创，旨在整理和自我学习。

总结

以上是生活随笔为你收集整理的提高CSS性能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。