第3章结构和层叠 => 特殊性(优先级) P69

conkeyn

浏览: 1518124 次
性别:
来自: 厦门

最近访客更多访客>>

fuyun10036

yl4257891

ja_1991

chenzehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS 浏览器 XHTML HTML

对于每个CSS规则，用户代理（浏览器）会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明，那么有最高的特殊性的声明就胜出。

选择吕的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0。一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0,1,0,0。
对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0。
对于选择器中给定的各个元素和伪元素，加0,0,0,1。伪元素是否有特殊性？在这方面CSS2有些自相矛盾，不过CSS2.1很清楚地指，伪元素有特殊性，而且特殊性值为0,0,0,1。
结合符和通配选择器对特殊性没有任贡献。

列如，以下规则中选择器的特殊性见注释：

h1 {color:red;} /* 0,0,0,1 */ ==>h1为第3点

p em {color:purple;} /* 0,0,0,2 */ ==>p为第3点， em为第3点

.grape {color:purple;} /* 0,0,1,0 */ ==>.grape为第2点

*.bright {color:yellow;} /* 0,0,1,0 */ ==>*为第4点，.bright为第2点

p.bright {color:red;} /* 0,0,1,1 */ ==>p为第3点，.bright为第2点，

p.bright em.dark{color:red;} /* 0,0,2,2 */ ==>p为第3点，.bright为第2点 em为第3点，.dark为第2点

#id216{color:red;} /* 0,1,0,0 */ ==>#id216为第1点

div#sidebar *[href] {color:red;} /* 0,1,1,1 */ ==>div为第3点，#sidebar为第1点，*为第4点，[href]为第2点。

html > body table tr[id="totals"] td ul > il {color:maroon;} /* 0,0,1,7 */ ==>htm:0,0,0,1; body:0,0,0,1; table:0,0,0,1 tr:0,0,0,1; id="totals":0,0,1,0 td:0,0,0,1 ul:0,0,0,1 ; il:0,0,0,1;

上述各种情况下，那些规则之所以胜出是国为其特殊性更高。之所以会这样，是因为值是从左向右排序的。特殊性值1,0,0,0大于以0开头的所有特殊性值，而不论后面的数是什么。所以0,1,0,1比0,0,1,7高，国为前一个值中第二位上的1大于第二个值中第二位上的0。

1、声明和特殊性：

一量确定一个选择器的特殊性，这个值将授予其所有相关声明。考虑以下规则：

h1,h2.section {color:silver;background:black;}

由于特殊性的缘故，用户代理（浏览器）必须相应地处理这个规则，将其“解组”为单独的规则。因此，前以的例子将变成：

h1 {color:silver;} /* 0,0,0,1 */

h1 {background:black;} /* 0,0,0,1 */

h2.section {color:silver;} /* 0,0,1,1 */

h2.section {background:black;} /* 0,0,1,1 */

如果多个规则与同一个元素匹配，而且有些声明相毒冲突，在这种情况下特殊性就很重要。例如，以下CSS程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>声明和特殊性</title>
<style type="text/css">
/* 0,0,0,2 */
h1 + p{
	color:red;
	font-style:italic;
}
/* 0,0,0,1 */
p{
	color:gray;
	background:white;
	font-style:normal;
}
/* 0,0,1,0 */
*.aside{
	color:black;
	background:silver;
}
</style>
</head>

<body>
<h1>Greetings!</h1>
<p class="aside">It's a fine way to start a day,don't you think?</p>
<p >There are many ways to greet a person,but the words are not as important as the act of greeting itself.</p>
<h1>Salutations!</h1>
<p >There is nothing finer than a hearty welcome from one's fellow man.</p>
<p class="aside">Although a thick and juicy hamburger with bacon and mushrooms runs a close second.</p>
</body>
</html>

2、通配选择器特殊性：

前台提到过，通配选择器对一个选择器的特殊性没有贡献。换句话说，其特殊性为0,0,0,0，这与根本没有特殊性有区别。

div p {color:black;} /*0,0,0,2*/

* {color:gray;} /*0,0,0,0*/

body * strong {color:red;} /*0,0,0,2*/

3、ID和属性选择器的特殊性：

需要着重指出，ID选择器和指定id属性的属性选择器在特殊性上有所不同。再来看示例代码中的第三组规则，可以看到：

html > body table tr[id="totals"] td ul > li {color:maroon;} /*0,0,1,7*/

li#answer {color:navy;} /*0,1,0,1*/

4、内联样式特殊性：

到目前为止，我们已经见过以0开头的特殊性，所有以你可能会奇怪为什么会有这些特殊性。一般地，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。

h1 {color:red;} /* 0,0,0,1*/

<h1 style="color:green;">The Meadow Party</h1> /*1,0,0,0*/

5、重要性：

有时候某个声明可能非常重要，超过了所有其他声明。CSS 2.1称之为重要声明，并允许在这些声明的结束分号之前插入!important来标识。

p.dark {color:#333 !important ; background:white;}

如果你希望把两个声明都标识为重要，那么每个声明都需要它自己的!important标识。

p.dark {color:#333 !important ; background:white !important ;}

查看图片附件

分享到：

Java String.replaceAll 使用 | CSS 样式学习库

2009-05-03 07:40
浏览 1118
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论