深入理解CSS选择符匹配方式.doc

深入理解CSS选择符匹配方式摘要：当前，浏览器的用户体验被提到了前所未有的高度，网页前端技术问题越来越为人所关注。CSS选择符的编写方式决定了浏览器必须执行的匹配次数，若不对其深入理解，可能会写出十分低效的样式规则，严重影响网页性能。重点关注CSS选择符的匹配方式，希望对广大网页前端技术人员提供一些参考 关键词：CSS选择符；匹配方式；网页性能 中图分类号：TP301文献标识码：A文章编号：1672?7800（2011）012?0037?02 作者简介：田岭（1976-），男，湖北荆州人，荆州职业技术学院讲师，教研室主任， 研究方向为网络编程、网站制作、多媒体技术。1正确理解选择符类型 按照浏览器对CSS选择符书写规则带来的页面开销（从小到大）的顺序，下面将列举CSS选择符的各种类型，并作简要的说明 （1）ID选择符，示例：#top{margin?top:50px;}。这类选择符最为简单和高效，它根据指定的id匹配页面中的唯一的元素。上面这个例子浏览器为页面匹配了id属性为top 的元素 （2）类选择符，示例：.idx{font?size:12px;}。类选择符的规则是通过点（.）和紧跟其后的类名来匹配所有类属性class等于该类名的元素。由于允许多个页面元素拥有相同的类，匹配类选择符所带来的开销可能会大些 （3）类型选择符，示例：a{text?decoration:none;}。类型选择符用于指定元素类型的页面中所有元素，这是一种给指定类型元素添加样式的简便方法。上面的例子中浏览器为页面中所有链接去除了下划线。由于页面中不同类型的元素出现的几率可能很不相同，所以这种选择符带来的开销可大可小 （4）相邻兄弟选择符，示例：h1+h2{margin?top:30px;}。这种选择符是用加号（+）把两个简单选择符组合起来，它匹配的是加号两端标签、id或类别相邻时加号后面的选择符对应的页面元素。在这个例子中，匹配的是与h1标签紧紧相邻的h2标签元素。这种选择符带来的开销大于没有使用连接符的简单选择符 （5）子选择符，示例：#topli{font?weight:bold;}。这种选择符是用大于号（）把两个或多个简单选择符组合起来，它匹配的是以大于号左侧为父元素右侧为子元素的页面元素。在这个例子中匹配的是标识为top的元素的子元素li。这种选择符带来的开销同样大于简单选择符 （6）后代选择符，示例：#top a{ text?decoration:none;}。这种选择符是用空格（“ ”）把两个或多个简单选择符组合起来，当后面选择符的对象是前面选择符对象的后代（子、孙等）时，后代选择符会进行匹配。这种选择符可能带来的开销是最大的，其使用应格外小心，其原因将在下文论述 还有通配选择符，属性选择符，伪类和伪元素选择符，因其无关本文讨论的重点，就不一一而述了 2最右边优先原则 CSS选择符对性能的影响，源于浏览器匹配选择符和文档元素时所耗费的时间，网页前端程序员可通过编写更高效的选择符来控制匹配的耗时，那就需要深入理解选择符到底是如何匹配的 我们大多数人，包括具有一定开发经验的网页前端程序员，从小就养成了从左到右的阅读习惯和思维习惯，这本无可厚非，但几乎每个CSS样式学习者都会猜想甚至认定浏览器也是按照从左到右的规则进行选择符匹配的，例如这条规则：#topli{ font?size:12px;} ,在脑海中，会想象浏览器是这样工作的：找到唯一标识为top的元素，然后把样式应用到其直系子元素中的li元素上，我们知道Id标识在文档中是唯一的，想当然会认为这个CSS样式规则会相当高效。事实上，CSS样式选择符是从右到左进行匹配的，了解了这个原则后，之前这个看似高效的CSS样式规则实际开销相当高，浏览器必须遍历页面上每个li元素，并确定其父元素的id是否为top。如果将其写成后代选择符：#top li{ font?size:12px;} ,情况会更加糟糕，浏览器首先会遍历页面中的每个li元素，然后检查它们的父元素id标识是否为top，不论是否匹配，还要继续遍历DOM文档树去查找所有li元素的祖先元素的id标识是否为top，如此周而复始直至DOM文档的根节点 因此，作为经常要处理CSS样式规则的网页前端程序员，必须要深入理解：样式系统从最右边的选择符开始向左匹配样式规则，只要当前选择符的左边还有选择符，样式系统就会不停向左移动，直到找到和规则匹配的元素，或因为找不到匹配而中止 3编写高效的CSS选择符 在正确理解了选择符从右到左的匹配规则后，就可以从另一个角度看待CSS选择符，并将其调整得更加高效。在某些情况下，如果可以排除其它原因导致网页性能下降，就应该审视一下CSS选择