谈一谈CSS的选择器和工作原理
来源:互联网 发布:苹果手机4g网络显示lte 编辑:程序博客网 时间:2024/06/15 18:10
既然我们是谈CSS,那我们先来说一下什么是CSS?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
之所以叫“层叠”,就是因为在 CSS 中,一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。哈哈,是不是觉得设计得很美妙……O(∩_∩)O哈哈~
做个web前端开发的人都知道,css提供了大量的选择器。在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。
但是到现在为止,有时候已有的选择器还有不够完美的地方,比如还不存在下面的几款
child < parent 即根据已知的子节点找到他的直接父节点,跟 > 选择直接孩子结点对应
child $ ancestors 即选择孩子结点的所以祖先结点们
A - B 即选择A节点前面的兄弟节点B,类似于jquery里的A.prev(),与现有的 + 选择后面的兄弟结点相对应
但是查阅W3C相关资料得知,CSS一直几乎没有这样的选择器(现在是没有,希望以后有啊……哈哈^_^),是因为这样的选择器会导致回溯。
那问题来了,什么是回溯呢?
那还得从浏览器是如何加载css讲起。浏览器最初设计的时候就考虑了渐进显示,也就是整个文档加载了多少就显示多少内容,而不用等整个下载完。浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。渐进显示在CSS上的原理就是一个节点所适用的样式只取决于它和它之前的节点(父节点、它之前的兄弟节点)的性质。而我们刚才提到的几款选择器则恰好相反,跟这个是背道而行的。言外之意,就是说当浏览器解析到一个新节点时,可能改变之前节点所适用的样式——因而要求在解析一个新节点后,得回头重新计算之前节点所匹配的样式,此即所谓“回溯”(就像我们现实中的水再往回流了,O(∩_∩)O哈哈~)。在最坏的情况下所导致大量的重新计算和reflow,可以相当于重新加载整个网页,在某种程度上来说,这是挺耗资源的。
现在我们来看下CSS是怎么工作的?
CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行。浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如 div#box p span.red{color:red;},浏览器的查找顺序如下:先查找 html 中所有 class=’red’ 的 span 元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有 id 为 box 的 div 元素,如果都存在,则 CSS 匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span.red。
最后谈一下常见的几种CSS优化:
1、不要在id选择器前使用标签名
一般写法:div#box
更好写法:#box
解释:因为id选择器是唯一的,加上div反而增加不必要的 CSS 匹配,这样就会显得多此一举了。
2、不要在 class 选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同上,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3、尽量少使用层级关系
一般写法:#box.red{color:red;}
更好写法:.red{color:red;}
4、使用 class 代替层级关系
一般写法:#box ul li a{display:block;}
更好写法:.block{display:block;}
5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的
class 会在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。
- 谈一谈CSS的选择器和工作原理
- jQuery选择器${}的工作原理
- css的类选择器#和id选择器.
- CSS的基本选择器和扩展选择器
- JQuery选择器$()的工作原理浅析
- css选择器“+”和“~”的区别
- 谈一谈css中的100%和auto
- 谈一谈SEO人员的一天工作安排!
- 谈一谈Spring MVC的工作流程
- 了解CSS发展史和工作原理
- CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
- 谈一谈Go的异常处理机制——panic和recover的使用和原理
- 结合多线程实例谈一谈LinkedBlockingQueue的原理
- css选择器和jquery选择器
- jquery选择器和css选择器
- 10、选择器Sizzle工作原理
- FLEX CSS样式:类选择器和类型选择器的区别
- css中ID选择器和类选择器的对比
- RDS SQL Server
- 面试题之大富翁问题
- zookeeper安装和使用 windows环境
- 微信 jssdk 看着文档简单总结
- zookeeper启动成功,显示not running问题
- 谈一谈CSS的选择器和工作原理
- Angular4 中常用的指令
- C++ 析构函数
- java下载压缩包文件zip
- 数据结构—二叉搜索数
- Android Webview知识点和遇到过的坑全总结
- Windows驱动程序的加载
- c/c++的改错练习二
- sqoop数据导入导出应用案例