css匹配,提高css效率

一直没有认真去了解CSS是如何运行,样式里面的选择器、元素的匹配规则。不清楚怎么样的样式选择、匹配才能让页面运行得更快、效率更高。如CSS：

div#divBox p span.blue{color:blue;}

我以前对这个CSS的理解是，浏览器先查找id为divBox的div元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为blue的时候，就应用该style。认为浏览器是从左往右匹配CSS的，可是这个理解却是完完全全相反、错误的。

CSS匹配原理：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的div#divBox p span.blue{color:blue;}，浏览器的查找顺序如下：

先查找html中所有class='blue'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

<style>

div#divBox p span.blue{ color:blue; }

<style>

</div>

如果按从左到右查找，会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='blue'>的元素。firefox称这种查找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.blue。

简洁、高效的CSS:

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找。下面列出一些常见的写CSS犯一些低效错误：

1.不要在ID选择器前使用标签名

一般写法：div#divBox

更好写法：#divBox

因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。

2.不要在class选择器前使用标签名

一般写法：span.blue

更好写法：.blue

同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

p.red{color:blue;}

span.blue{color:blue;}

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

3.尽量少使用层级关系

一般写法：#divBoxp.blue{color:blue;}

更好写法：.blue{..}

4.使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

转载于:https://www.cnblogs.com/gb2013-shangduoduo/p/3420390.html

css匹配,提高css效率相关推荐

如何提高CSS网页渲染效率
如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1. ...
web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
提高css开发效率的代码片段模板
提高css开发效率的代码片段这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目中遇到的问题清除浮动浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很 ...
CSS 选择器优先级与效率优化
CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 各类选择器的优先级 import ...
css匹配title,解决css中的匹配问题
问题描述众所周知在写 css的时候,会根据html 中类的定义或者 id 的定义来写相应的 css代码.给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css 中引用匹配.匹配有模糊匹 ...
提高CSS文件可维护性的五种方法
当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...
无懈可击的Web设计:使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
<无懈可击的Web设计:使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)> 基本信息原书名:Bulletproof Web Design:Improving flexibi ...
推荐 5 个火火火火的帮你提高 CSS 技巧项目
1Font-Awesome 这个 70K Star 的开源项目是一个 CSS.SVG.字体的工具箱.在这里你可以找到你任何想要的可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 CSS 的样 ...
目前最新《脑动力 html+css标签速查效率手册[刘丽霞] 》
介绍: HTML是所有网页制作技术的核心和基础,也是每个网页制作者必须掌握的基本知识.CSS是用于控制网页内容显示效果的一种标记语言,可以制作更美观的页面.两者在网页设计中不可或缺. <脑动力: ...
[css] 为什么说css中能用子代选择器的时候不要用后代选择器？
[css] 为什么说css中能用子代选择器的时候不要用后代选择器? 选择从右到左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级:减少匹配次数,提高效率个人简介我是 ...

css匹配,提高css效率

css匹配,提高css效率相关推荐

最新文章

热门文章