浏览器会『从右往左』解析CSS选择器. 我们知道DOM Tree与Style Rules合成为 Render Tree,实际上是需要将Style Rules附着到DOM Tree上, 因此需要根据选择器提供的信息对DOM Tree进行遍历,才能将样式附着到对应的DOM元素上. 以下这段css为例 <style type="text/css"> .mod-nav h3 span {font-size: 16px;} </style> 若从左向右的匹配,过程是: 从…

首先我们要看一下选择器的「解析」是在何时进行的. 主要参考这篇「 How browsers work」(http://taligarsiel.com/Projects/howbrowserswork1.htm)来看,浏览器渲染的过程以 WebKit 为例大致如下: HTML 经过解析生成 DOM Tree(这个我们比较熟悉):而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图.Render Tree 中的元素(We…

css1-css3提供了很多选择器,总得来说分为几大类: 群组选择器:逗号"," 简单选择器:ID,标签,类,属性,通配符 关系选择器:孩子,后代,兄弟,相邻 伪类选择器:动作伪类,目标伪类,语言伪类,状态伪类,结构伪类,取反伪类. 群组选择器用于分组合并多个处理的结构 selector1,selector2,selectorN 简单选择器# . [ * 这些都有内置原生API的支持,不过存在兼容问题. 属性选择器在css2.1中只有4种. [attr][attr=val][attr~…

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况. 这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的.... CSS 选择器…

30个你不可不知的CSS选择器   一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.*在css的优先级中是最低的. * {margin: 0; padding: 0;} 也可以用*来匹配某一元素下的所有子元素: #container * {border: 1px solid black;} 2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XX…

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px…

转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的m…

摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DOM 元素的style属性内嵌的 CSS.所 有 CSS 都根据语法规范进行解析和标记.解析完成后,就会生成有一个包含所有选择器.属性和属性各自值的数据结构. 例如,考虑以下 CSS: .fancy-button { background: green; border: 3px solid red; font-…

作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jquery使用的了解,于是把jquery中选择器的优化放到了写css上面,但是发现其实这两者是不一样的,浏览器解析css是本身默认的规则,而jquery是模拟出来的规则为了用户更好的使用.后面去查找这方面的资料,于是发现自己的错误是那么的可笑. 找到了阿里前端的一篇文章http://www.aliued…

先产生一个元素集合,然后从后往前判断: 浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合).然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了.举个例子,有选择器: body.ready #wrapper > .lol233 先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把…