CSS(2) - iLeichun

当前位置：首页 > CSS

CSS的查找匹配原理

分类:CSS 来源:网络时间:2010-12-17 23:34:24

用了这么多年的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:

view sourceprint?01 <style>

02 DIV#divBox p span.red{color:red;}

03 <style>

04 <body>

05 <div id="divBox">

06 <p><span>s1</span></p>

07 <p><span>s2</span></p>

08 <p><span>s3</span></p>

09 <p><span class=’red’>s4</span></p>

10 </div>

11 </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;}

PS：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考

　　mozilla firefox：https://developer.mozilla.org/en/Writing_Efficient_CSS

　　google page-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

阅读全文>>

浏览(8215) | 评论(0)

全方位清理浮动

分类:CSS 来源:网络时间:2010-8-19 19:15:42

清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了，下一个专题再写)。对应的DEMO

采用伪类:after进行后续空制的高度位零的伪类层清除
采用CSS overflow:auto的方式撑高
采用CSS overflow:hidden的方式产生怪异适应
采用display:table将对象变成table形式
采用div标签，以及css的clear属性
采用br标签，以及css的clear属性
采用br标签，以及其自身HTML的clear属性

粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）

优点结构语义化完全正确，不会产生其余的怪异问题。
缺点复用方式不当容易造成代码量急剧增大。
建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。
优点结构语义化完全正确，代码量极少。
缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。
建议内个模块使用，请勿嵌套。
优点结构语义化完全正确，代码量极少。
缺点内容增多时候极易不会自动换行而内容被隐藏掉。
建议宽度固定时使用，请勿嵌套。
优点结构语义化完全正确，代码量极少。
缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
优点代码量极少，复用性极高。
缺点完全不能完美的适应语义化，不利于改版以及需求变更。
建议初学者使用，可以让你快速的解决浮动问题。
优点语义化程度比第5种情况要更优；代码量极少，复用性极高。
缺点语义化依旧不完美，不利于改版以及需求变更。
建议初学者使用，可以让你快速的解决浮动问题。
优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
缺点语义化依旧不完美，不利于改版以及需求变更。
建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。

最后，列举完毕。然而我想有必要和大家道歉，关于之前转载鬼的那篇文章；非常后悔的是当初改了鬼的标题将“最简单”改成了“最优”，以致于后面误导了很多的同学。所以重新写了一篇给大家分享。

原文：http://webteam.tencent.com/?p=1122

阅读全文>>

浏览(7301) | 评论(0)

自动适应高度的CSS代码

分类:CSS 来源:网络时间:2010-8-16 0:20:11

自动适应高度的CSS代码，CSS如何做到自适应？这里的代码有些需要注意的地方，如果你认真看的话你会发现是有技巧的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
       <div id="div1"></div>
    <div id="div2"></div>
</div>
</body>
</html>