依然 — Wed, 15 Oct 2008 03:26:00 GMT

在讲CSS优先�U�的优先�U�之前，我们得要了解什么是CSS�Q�CSS是用来做什么的�?

　　首先�Q�我们对CSS作一个简单的说明�Q�CSS是层叠样式表�Q�Cascading Style Sheets�Q�的��U�。它的规范代表了互联�|�历史上一个独特的发展阶段。现在对于从事网��制作的朋友来说�Q�应该很��没有听说过CSS了，因�ؓ在制作网��过 �E�中我们�l�常需要用到�?

　　其次�Q�我们能通过CSS为文档设�|�丰富且易于修改的外观，以减�ȝ��制作者的工作负担�Q�从而减��d��作及后期�l�护的代仗��?

　　其实现在�q�来讲CSS是什么，CSS有什么作用完全是多余的，�怿�从事�|�页制作的朋友都已经或多或少的接触过了�?

　　�a�归正传，我们开始进入今天的话题�Q?

　　一、什么是CSS优先�U�？

　　所谓CSS优先�U�，��x��指CSS样式在浏览器中被解析的先后顺序�?

　　二、CSS优先�U�规�?/strong>

　　既然有优先��Q�那么就会有一个规则来�U�定�q�个优先�U�，而这�?#8220;规则”��是本次所需要讲的重炏V�?

　　样式表中的特�D�性描�q�C��不同规则的相�Ҏ��重，它的基本规则是：
1. �l�计选择�W�中的ID属性个数�?
2. �l�计选择�W�中的CLASS属性个数�?
3. �l�计选择�W�中的HTML标记名个数�?

　　最后，按正��的��序写出三个数字�Q�不要加�I�格或逗号�Q�得��C��个三位数(css2.1是用4位数表示)�? 注意�Q�你需要把数字转换成一个以三个数字�l�尾的更大的�?。相应于选择�W�的最�l�数字列表可以很�Ҏ��定较高数字�Ҏ��凌驾于较低数字的�?

　　例如�Q?
1. 每个ID选择�W?#someid)�Q�加 0,1,0,0�?
2. 每个class选择�W?.someclass)、每个属性选择�W?形如[attr=value]�{?、每个伪�c?形如:hover�{?�?,0,1,0�?
3. 每个元素或伪元素(:firstchild)�{�，�?,0,0,1�?
4. 其它选择�W�包括全局选择�W?�Q�加0,0,0,0。相当于没加�Q�不�q�这也是一�U�specificity�Q�后面会解释�?

　　三、特性分�cȝ��选择�W�列�?/strong>

　　以下是一个按�Ҏ��分�cȝ��选择�W�的列表�Q?

选择�W?/font>

�Ҏ��?/font>

h1 {color:blue;}

1

p em {color:purple;}
2

.apple {color:red;}
10

p.bright {color:yellow;}
11

p.bright em.dark {color:brown;}
22

#id316 {color:yellow}
100

单从上面�q�个表来看，貌似不大好理解，下面再给��Z��张表�Q?

选择�W?/font>

�Ҏ��?/font>

h1 {color:blue;} 1

p em {color:purple;} 1+1=2

.apple {color:red;} 10

p.bright {color:yellow;} 1+10=11

p.bright em.dark {color:brown;} 1+10+1+10=22

#id316 {color:yellow} 100

　　通过上面�Q�就可以很简单的看出�Q�HTML标记的权重是1,CLASS的权重是10,ID的权重是100�Q��承的权重�?�Q�后面会讲到�Q��?

　　按这些规则将数字�W�串逐位相加�Q�就得到最�l�的权重�Q�然后在比较取舍时按照从左到右的��序逐位比较�?

　　优先�U�问题其实就是一个冲�H�解决的问题�Q�当同一个元素（内容�Q�被CSS选择�W�选中�Ӟ��p��按照优先�U�取舍不同的CSS规则�Q�这其中涉及到的问题其实很多�?

　　说到�q�里�Q�我们不得不说一下CSS的��承性�?

　　四、CSS的��承�?/strong>

　　4.1 �l�承的表�?/strong>

　　�l�承是CSS的一个主要特征，它是依赖于祖�?后代的关�pȝ��。��承是一�U�机�Ӟ��它允许样式不仅可以应用于某个特定的元素，�q�可以应用于它的后代。例如一个BODY定义了的颜色��g��会应用到�D�落的文本中�?

样式定义�Q?/strong>body {color:#f00;}
举例代码�Q?/strong>
CSS�l�承�?lt;/strong>的测�?lt;/p>
举例效果�Q?/strong>

　　�q�段代码的应用结果是�Q?#8220;CSS�l�承性的��试”�q�段话是�U�颜色的�Q?#8220;�l�承�?#8221;几个字由于应用了标签�Q�所以是�_�体�? 很显�Ӟ��q�段文字都��承了由body {color:#f00;}样式定义的颜艌Ӏ�这也就是�ؓ什么说�l�承性是CSS的一部分�?

　　然而CSS�l�承性的权重是非�怽�的，是比普通元素的权重�q�要低的0�?

　　我们仍以上面的�D例代码�ؓ例：在样式定义中��d��一条：strong {color:#000;}�?

举例效果�Q?/strong>

　　发现只需要给加个颜色值就能覆盖掉它��承自的样式颜艌Ӏ�由此可见：��M��昄��x��的规则都可以覆盖其��承样式�?

　　4.2 �l�承的局限�?/strong>

　　�l�承是CSS重要的一部分�Q�我们甚至不用去考虑它�ؓ什么能够这��P��但CSS�l�承也是有限制的�?

　　有一些属性不能被�l�承�Q�如�Q�border, margin, padding, background�{��?

样式定义�Q?/strong>div {border:1px solid #000;}
举例代码�Q?/strong>
我是border我是不能被��承滴

预期效果�Q?/strong>
实际效果�Q?/strong>

　　从上面的效果中，我们可以看出�Q�border是不能被�l�承的，�q�有一些其它的属性也是如此，�q�里��׃��一一列�D�?

　　五、附加说�?/strong>

　　1. 文内的样式优先��?,0,0,0�Q�所以始�l�高于外部定义。这里文内样式指形如
blah
的样式，而外部定义指�l�由�?lt;style& gt;��h��定义的规则�?
2. �?important声明的规则高于一切�?
3. 如果!important声明冲突�Q�则比较优先权�?
4. 如果优先权一��P��则按照在源码中出现的��序军_��Q�后来者居上�?
5. ��q��承而得到的样式没有specificity的计��，它低于一切其它规�?比如全局选择�W?定义的规�?�?
6. 关于�l�由@import加蝲的外部样式，�׃��@import必须出现在所有其它规则定义之�?如不是，则浏览器应该忽略�?�Q�所以按照后来居上原则，一般优先权冲突时是占下风的�?

　　�q�需要说一下，IE是可以识别位�|�错误的@import的，但无论@import在什么地方，它都认�ؓ是位于所有其它规则定义之前的�Q�这可能会引发一些误会�?

　　优先权问题看��h��单，但背后还是有非常复杂的机�Ӟ��在实际应用中需要多多留意�?

　　六、练�?/strong>

　　看完上面的文字后�Q�来做几道非常简单的题目。（自己�{�完前，请不要先看各题给出的链接地址�?/strong>�Q?/p>
1. 如何让��用两个��用相同样式名的元素具有不同的效果�Q?a >链接
固定效果�Q?/strong>
固定代码�Q?
传说中的��试

传说中的��试

2. 如何�?lt;h3>始终为黑�Ԍ��?lt;em>在不�?lt;h3>包含的情况�ؓ�U�色�Q?a >链接
固定效果�Q?/strong>
固定代码�Q?
讨论CSS优先�U?lt;/h3>

讨论CSS优先�U?lt;/p>

3. 如何写一个外部样式��?lt;h3 style="color:#000;"> 覆盖�?lt;/h3>的颜色�ؓ�U�色�Q?a >链接

4. 如何让同时具�?a,.b样式的元素只表现.a的颜色样式：链接
固定代码�Q?/strong>
传说中滴��试

依然 2008-10-15 11:26 发表评论

亚洲国产精品xo在线观看,亚洲av日韩综合一区二区三区,亚洲免费综合色在线视频

UTF-8的BOM问题

选择�W?/font>	�Ҏ��?/font>
h1 {color:blue;}	1
p em {color:purple;}	2
.apple {color:red;}	10
p.bright {color:yellow;}	11
p.bright em.dark {color:brown;}	22
#id316 {color:yellow}	100