一. 匹配原理

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找 html 中所有 class=’red’ 的 span 元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有 id 为 divBox 的 div 元素,如果都存在,则 CSS 匹配上。

  浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span.red。

二.css优化

所谓高效的 CSS 就是让浏览器在查找 style 匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写 CSS 犯一些低效错误:

  1、不要在ID选择器前使用标签名

  一般写法:DIV#divBox

  更好写法:#divBox

  解释:因为ID选择器是唯一的,加上div反而增加不必要的 CSS 匹配。

  2、不要在 class 选择器前使用标签名

  一般写法:span.red

  更好写法:.red

  解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

  p.red{color:red;}
  span.red{color:#ff00ff}

  如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写

  3、尽量少使用层级关系

  一般写法:#divBoxp.red{color:red;}

  更好写法:.red{..}

  4、使用 class 代替层级关系

  一般写法:#divBox ul li a{display:block;}

  更好写法:.block{display:block;}

  5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

  class 会在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

css匹配原理与优化的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. CSS选择器、优先级与匹配原理(转)

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. 弄清楚CSS的匹配原理让你写出高效的CSS

    用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...

  4. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. css选择器优选级及匹配原理(转)

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  8. NFA引擎匹配原理

    1       为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动听的乐曲,但他/她或 ...

  9. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

随机推荐

  1. QVariant实质 (类似 C#中的装箱拆箱)

    QVariant是一种可以存储不同类型的数据结构,在很多场合这是很有用得为了达到这种目的,可以想象,该对象应该存储对象的类型信息,数据信息以及其他辅助详细考虑用途,这种对象必须支持对不同对象的存储,对 ...

  2. C#编程实现Excel文档中搜索文本

    有了在Word文档中编程实现搜索文本的经验,在Excel中实现这个功能也并非难事. 打开Excel的VBA帮助,查看Excel的对象模型,很容易找到完成这个功能需要的几个集合和对象:Applicati ...

  3. C#中的深拷贝与浅拷贝

    1.基本的概念: 首先我们应该了解一下什么叫深拷贝与浅拷贝(Deep Copy and Shallow Copy). a.浅拷贝(Shallow Copy影子克隆):只复制对象的基本类型,对象类型,仍 ...

  4. 【转】G++ 处理 /usr/bin/ld: cannot find -lc

    原文网址:http://blog.sina.com.cn/s/blog_67bbb71101010tto.html 用g++编译C++程序时显示出:/usr/lib/ld: cannot find - ...

  5. 【转】Cannot find -ltinfo when compiling android 4.0.3

    原文网址:http://stackoverflow.com/questions/9055005/cannot-find-ltinfo-when-compiling-android-4-0-3 up v ...

  6. 实现简单的WebPart

    转:http://www.cnblogs.com/gaoweipeng/archive/2009/10/26/1589269.html 在前面的文章中,我们讲解了很多基础的内容,主要包括安装配置.简单 ...

  7. 基于DDD的现代ASP.NET开发框架--ABP系列之2、ABP入门教程

    基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boi ...

  8. 对ASP.NET程序员非常有用的85个工具

    介绍 这篇文章列出了针对 ASP.NET 开发人员的有用工具. 工具 1. Visual Studio Visual Studio Productivity Power tool:Visual Stu ...

  9. NOIP2013 花匠 DP 线段树优化

    网上一堆题解,我写的是N^2优化的那种,nlogn,O(n)的那种能看懂,但是让我自己在赛场写,肯定没戏了 #include <cstdio> #include <iostream& ...

  10. CCClippingNode bug

    在Cocos2d-x v2.x,CCClippingNode类有一个bug,导致区域裁剪失效,由于Cocostudio的UIScrollview组件是基于该类构建的,所以这个问题是比较常见的,fix的 ...