渲染CSS选择器
发布时间：2009-07-02 23:25:52 作者：佚名 
我要评论
我要评论最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译作者原文那就更好了，大家都会感谢你的；
看懂的整理了如下
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译作者原文那就更好了，大家都会感谢你的；
看懂的整理了如下几点：
1.作者先前的文章里说：不用去优化CSS选择器，因为优化CSS选择器对网友的性能提升很小，不值得去计较；这个观点似乎有点不对，作者收到了很多批评的反馈；
2.David Hyatt的文章《Writing Efficient CSS for use in the Mozilla UI》中提到的一条CSS渲染规则是：在一条css中，css选择器是从最右边开始之后依次向左移动的，直到它不匹配CSS规则或匹配错误；所以我们的工作重点应该放在最右侧的CSS选择器来匹配大量的页面的元素。
比如这样一个css选择器：div div div p a.class0007 {}
这个选择器有5层，貌似很负责的，但是最右边的选择器是A.class0007，在页面中只有一个匹配的元素逆向匹配（.class0007）；
所以这样的选择器不用担心他的性能；
3.当然还有一些性能不好的css选择器：
A.class0007 * {}
A.class0007 DIV {}
#id0007 > A {}
.class0007 [href] {}
DIV:first-child {}
这些性能不好的css选择器主要是因为在最右边的选择器可以匹配的元素很多，从而降低了页面的性能。
相关文章
- 在不嵌套单独使用ID选择器的情况下,它是比较快的,然而各种各样的原因使开发者们抛弃对ID选择器的使用.究竟该不该使用ID选择器？这里我们就来浅谈对CSS的ID选择器的使用建议2016-07-11
- 这篇文章主要介绍了CSS中的类型选择器和ID选择器以及类选择器,选择器时CSS入门学习中的基础知识,需要的朋友可以参考下2016-02-18
- 网页制作Webjx文章简介：英文教程:五种CSS选择器类型. CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.Followingarethevariouswaysavaila2009-04-02
IE7对css选择器的改进-CSS教程-网页制作-网页教学网
1、对伪类的支持。IE6和更低的版本对于伪类的支持仅限于a标签，诸如“:hover”、“:active”、“:focus”之类的伪类理论上是应该适用于所有2008-10-17CSS属性选择器的四种格式-CSS教程-网页制作-网页教学网
属性选择器（AttributeSelectors），或许你不应该对属性选择器感到陌生，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。2008-10-17- 一些新手朋友对选择器一知半解，不知道在什么情况下运用什么样的选择器，这是一个比较头疼的问题，针对新手朋友，对CSS选择器作一些简单的说明，希望能对大家的学习工作2008-10-17
- 伪类，用于给元素的片段添加样式，这如何理解呢？比如你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选2012-04-18
- 前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择2012-01-21
- 上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器2012-01-21
- CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器2012-01-21
最新评论