了解CSS的查找匹配原理,让CSS更简洁、高效
发布时间:2010-06-08 13:36:00
用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:
DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。
匹配原理:
浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:
先查找html中所有class='red'的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
<style>
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>
如果按从左到右查找,哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找,则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。
简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误,还老以为这样写才是高效的):
1、不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
2、不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释: 同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3、尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}
4、使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}
猜你喜欢
- 比如:Set Connobject=nothing nothing如同英文单词字面意思,没有,没有那个,没有这个,没有东西 Set Conn
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 8 - Input Filtering Part
- 比如有一个需求,通过sql语句,返回-5至5的随机整数.如果这一个放在PHP中,则非常简单直接用print rand(-5,5);?>
- 好久没有更新博客了,今天看到论坛上有位朋友问起全屏布局,有点像vc的界面。来了兴趣,就写了一个。运用IE6的怪异模式,通过绝对定位来实现的。
- 如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个。可以通过 select.selec
- 根据一般做法的话,导出部分字段时没有办法生成格式化XML文件,所以导入时就没有办法格式化导入数据。 我想到两点,1.手工修改格式化XML文件
- 1,FCKeditor 编辑器最新版本: 2.3.1站点:http://www.fckeditor.net 演示:http://w
- 渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上。默认情况下渲染引擎可以显示HTML,XML文档以及图片。 通过插件(
- 现在正在搞三层开发,用ASP和VB6.0,但是现在苦于没有找到合适的方法来调试自己写的DLL文件,效率相当低。 &n
- 简介模板方法模式,是行为型的设计模式。定义一个操作中的算法的骨架,而将一些步骤延迟到子类当中,使得子类可以不改变一个算法的结构即可重新定义该
- 作用域链(Scope Chain)JavaScript中的一种重要机制,JS中所有的标识符(Identifier)都是通过Scope Cha
- 可以,具体说明和代码见下: <%@ Language=VBScript %><%Option
- asp.net的dropdownlist控件为我们的web应用提供了许多用处,但有一点我总感觉不爽的就是在使用dropdownlist的事件
- SQL Server数据库查询优化的常用方法总结:本文中,abigale代表查询字符串,ada代表数据表名,alice代表字段名。技巧一:问
- SqlBulkCopy 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 nvarchar。 在网上找了下,大都说是因为数
- SQLserver 2000中出现“指定的服务并未以已安装的服务存在" 解决方案一、将计算机名改成大写。二、将sql server
- 前面已经介绍了关于Dreamweaver MX 2004的基本操作
- 以下是SQL连接代码: 代码如下:Function Open_conn() dim Conn,Strconn&
- 如何获知用户的IP?<% Dim ValidLog ' 日志变量 Valid
- nofollow标签是Google2005年推出的,目的是尽量减少垃圾链接对搜索引擎的影响。有用过网页制作工具的人都知道,在这些工具里是找不