你的位置:首页 > 网页设计

[网页设计]CSS特殊性、继承与层叠


一、特殊性规则

选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为0,0,0,0。

1.    对于选择器中的每一个id,加0,1,0,0;

2.    对于选择器中的每一个类、伪类、属性选择,加0,0,1,0;

3.    对于选择器中的每一个元素、伪元素,加0,0,0,1;

4.    结合符与通配符对于选择器的特殊性没有任何贡献。

 

注意:

1.    0,0,1,0的特殊性比0,0,0,13的特殊性更高。

2.    通配符 * 的特殊性为0,0,0,0,它是有特殊性的;结合符(比如h1+p中的“+”)根本没有特殊性;继承而来的样式也没有特殊性。

请看如下代码:

 1 <head> 2 <style> 3 * { 4   color:red; 5 } 6 body { 7   color:cyan; 8 } 9 </style>10 </head>11 <body>12  <p>What kind of color this para will be?</p>13 </body>

页面显示如下:

关于通配符 * :由于 * 适用于所有元素,而且有0特殊性,往往会在不经意间造成继承无法实现的情况,应该尽量避免使用 * 选择器。

 

3.    指定id属性的属性选择器与id选择器有本质区别,比如:

 1 <head> 2 <style> 3 div[id="test"] p { 4   color:red; 5 } 6 #test p { 7   color:cyan; 8 } 9 </style>10 </head>11 12 <body>13  <div id="test">14   <p>What kind of color this para will be?</p>15  </div>16 </body>

页面效果:

 

4.    行内样式的特殊性最高,为1,0,0,0。

5.    标记为!important的声明被称为重要声明,它没有特殊性,不过要与非重要声明分开考虑。

具体而言:非重要声明分为一组,它们之间的冲突使用特殊性解决;重要声明分为一组,它们之间的冲突内部解决;重要声明总是比非重要声明优先。

 

二、继承

1.    继承没有任何特殊性,记住这一点往往能明白很多问题。

请看如下代码:

 1 <head> 2 <style> 3 p { 4   color:red; 5 } 6 </style> 7 </head> 8 <body> 9  <p>What kind of color this <a href="#">link</a> will be?</p>10 </body>

页面效果:

为什么设置了<p>元素的颜色为红色,<a>元素的颜色却是蓝色?

这并不是因为<a>元素不继承父元素的颜色(原谅我之前就是这么认为的),而是因为<a>元素继承了<p>元素的颜色,但是这个继承来的样式根本没有特殊性,然而浏览器默认样式中对<a>元素设置了样式,很明显浏览器默认样式的特殊性更高,于是<a>元素就按照浏览器默认样式显示。

 

2.    关于CSS中的继承:一般而言,只能子元素继承父元素的样式,也就是说样式在DOM中只能向下传递,不能向上;但是有一个例外,应用到body元素的背景样式可以向上传递到html元素,相应地可以定义其画布。

 

三、层叠

层叠规则:

1.    按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。

2.    权重相同的情况下,按照特殊性排序,特殊性越高的胜出。

3.    特殊性相同的情况下,按照样式表中的顺序排序,后出现的胜出。

btw,正是因为这个规则,才会使用LoVe-HA的顺序声明链接样式(LoVe-HA 依次为 :link;  :visited;  :hover;  :active)。