CSS如何为同一个元素处置多种规则
日期：2013-08-16 浏览次数：21167 次
理解和使用层叠款式表的一个重要细节是它的名字中的层叠方面。也就是说，它是如何为同一个元素处理多种规则的？本周，我将详细的引见CSS这方面的特性，并举例说明。
优先性
CSS属性比HTML属性有更大的优先权。你可以在没有CSS支持的浏览器中使用HTML属性，但是在浏览器中添加CSS支持也不会有什么影响。在使用CSS时，深刻理解一个CSS规则的来源是很重要的。
来源
当考虑CSS规则的使用时，通常有两个方面。第一个是读者，也就是对应于通过他们喜欢的浏览器查看web使用的用户。第二个方面是作者，也就是开发了web使用的实际web 开发人员。
读者的参数选择有用户来处理，也就是，他们可以开发本人的款式表，然后同过浏览器设置分配它们。例如，因特网浏览器IE 6用户可以通过工具 | Internet选项 | 访问菜单来指定一个用户款式表，这样他们就可以使用本人的款式表。Web开发人员通过开发本人的CSS来指定规则并在网页中使用。同时，浏览器也常有内置的规则。
层叠
缩写词CSS中的层叠方面指的是不同来源的规则间合并与覆盖过程。当同时使用多个款式表时，每个款式表定义的选择器之间会互相抢夺控制。下面列表指名了顺序，这样就处理了款式表选择器之间的冲突，其中第一项是最重要的。
重要性：选择器能否被指定为重要?
规则来源：规则在那里定义的？
特性：规则的特性是什么？
顺序：最后定义的是什么？
重要的特性
添加关键字important可以添加你的声明的重要性。添加重要性的声明会覆盖与它们对应的标准或非重要声明。如果读者和作者的款式表都包含了重要声明语句，那么作者声明将会覆盖读者声明。下面的例子演示了声明一个CSS属性为重要。
<html>
<head>
<title> Cascading</title>
<style type="text/css">
H1 {font-face: arial; font-size: 12pt; color: red ! important;}
</style>
</head>
<body>
<h1 style="color: blue;">TechRepublic.com</h1>
</body>
</html>
在上面的例子中，你可以留意到分配给款式H1的颜色red总是有用的，由于它被声明为重要的。值得留意的是，当一个项目在读者和作者款式表中均被声明为重要时，作者的声明将会覆盖读者的声明。
规则来源
一个web用户可以创建和使用他/她本人的款式表。在这种情况下，在用户款式表和web使用款式表之间将会产生冲突。当这些冲突发生时，web使用的设置胜过当所有项目拥有同样的重要性时。可以使用重要的声明胜过对应非重要的声明，但是，当都声明为重要时，就意味着web使用会赢。
特性
当CSS规则的特性，更有特殊性的规则会博得优先。因此，如果选择器都是一样的，那么最后一个就会博得优先。所以下面的例子中总是定义H1为绿色。
<html>
<head>
<title>Cascading</title>
<style type="text/css">
H1 {color: red;}
H1 {color: green;}
</style></head>
<body>
<h1>TechRepublic.com</h1>
</body></html>
另一方面，下面例子中包含在BODY中的H1有一个特殊的定义，所以元素H1显示为红色。
<html><head>
<title>Cascading</title>
<style type="text/css">
BODY H1 {color: red;}
H1 {color: green;}
</style></head>
<body>
<h1>TechRepublic.com</h1>
</body></html>
当显示一个页面时，越具特色的选择器，越有更大的优先权。实际上，有专门用于预算元素特性的规则，基本上，数字值被分配给某些CSS选择器，每个选择器的值为100，类选择器的值为10，每个HTML选择器的值为1。如果你将这些值赋给CSS规则，那么值大的会博得优先。下面的计算对应前面的例子。BODY H1有两个HTML选择器，因此值为1+1=2。H1包含一个HTML选择器，因此值为1，在每个实例中，2恒大于1，所以元素H1(包含在BODY中的)都是红色。
顺序
规范的顺序很简单：当两个规则有相反的重要性时，后一个规则优先性大。当有多个款式表来源时，使用这个规则可能会导致混淆。因此下面的操作顺序十分有用：
浏览器默认：第一，使用了浏览器默认或者用户自定义CSS规则。
外部款式表：使用了外部定义的款式表
内部款式表(在<head>标签中指名)
内嵌款式表（在一个HTML元素的内部）：使用了使用于每个HTML元素的特别款式
留意
目前，CSS是大多数web使用的一个标准特征。随着web使用的添加，大量的CSS来源被使用。为此，你需求深入了解用户系统是如何处理多种CSS规则的。这样就确保了对你或者对用户都不会产生惊讶。
