内容简介：看了一下最近写的css代码,发现基本只用到了id选择器(js里)、后代选择器和类选择器(因为听大牛推荐使用类选择器,然后就开始大篇幅使用。。。)。所以想深入学习一下css选择器和css的效率优化,先记录所学的一部分,以备后续补充。在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“
看了一下最近写的css代码,发现基本只用到了id选择器(js里)、后代选择器和类选择器(因为听大牛推荐使用类选择器,然后就开始大篇幅使用。。。)。所以想深入学习一下css选择器和css的效率优化,先记录所学的一部分,以备后续补充。
选择器效率由高到低:
id选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 相邻选择器（h1+p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器（*） 属性选择器（a[rel="external"]） 伪类选择器（a:hover,li:nth-child）
在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“ 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行 ”。
选择器的最后一部分，也就是选择器的最右边,部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。“ 越具体的关键选择器，其性能越高” 。 举个例子： #myId span和span #myId谁的效率更高?答案是后者效率更高,因为后者的关键选择器更具体。
选择器优先级:
行内样式就是这种语法的<标签名 style="属性1;属性2;属性3;属性4">内容</标签名>。例如这样:
使用规则
| 规则 | 说明 |
| 行内样式会被!important覆盖 | 不推荐使用!important。!important的优先级比行内优先级高,有时候样式一直不生效就可能不知道在哪写了个!important。 |
| 优先级不同的选择器作用在同一元素上,优先级高的生效。 | |
| 优先级相同的选择器在同一元素上，以后出现的为准。 | 如果一直修改一个样式不生效，可能是被后出现的同名选择器给覆盖了。。。。 |
| 优先级相同，与元素近的选择器生效。 | head里和.css文件里，head里的选择器生效 |
注:
!important说明:
如果不使用!important，第二个样式会覆盖第一个，但是由于第一个有!important，所以在字号设置上优先级更高。
使用建议
| 建议 | 说明 |
| 避免将通用选择器作为通用选择器。 | 匹配开销大。 |
| 避免id选择器用标签和类 | |
| 避免class选择器用标签 | |
| 用class替换多层标签选择器 | 减少css查找 |
| 避免使用子选择器 | 后代选择器是开销最最最最大的。 |
| 避免正则的属性选择器 | |
| 删除没用的样式 | 用 工具 检索是否用到 |
结束语:诶,看了一圈发现还是要用类选择器...（捂脸）
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 选择/取消选择所有按钮以选择闪亮变量
- 个人如何成长？兴趣驱动，选择与被选择的思考
- v-region 2.0.0 发布，行政区划选择器(4 级联动城市选择)
- v-region 2.0.0 发布，行政区划选择器(4 级联动城市选择)
- 选择排序——Python实现
- PHP实现选择排序
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
解密搜索引擎技术实战
罗刚 / 2011-6 / 69.80元
《解密搜索引擎技术实战-Lucene&Java精华版(附盘)》，本书主要包括总体介绍部分、爬虫部分、自然语言处理部分、全文检索部分以及相关案例分析。爬虫部分介绍了网页遍历方法和如何实现增量抓取，并介绍了从网页等各种格式的文档中提取主要内容的方法。自然语言处理部分从统计机器学习的原理出发，包括了中文分词与词性标注的理论与实现以及在搜索引擎中的实用等细节，同时对文档排重、文本分类、自动聚类、句法分析树......一起来看看 《解密搜索引擎技术实战》 这本书的介绍吧!
