1.继承性
所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他的标记都嵌套在<body>标记的子标记。
继承性非常有用,它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性,只需将它应用于父元素即可,如下面的代码:
p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;}
就可以写成:
body{color:black;}
第二种写法可以达到相同的控制效果,且代码更简洁。
恰当地使用继承可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有的元素都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以使用继承。并不是所有的CSS属性都可以继承,如下面这些属性就不具有继承性:
- 边框属性
- 外边距属性
- 内边距属性
- 背景属性
- 定位属性
- 布局属性
- 元素宽高属性
注意:
当为body元素设置字号属性时,标题文本不会采用这个样式,读者可能会认为标题没有继承文本字号,这种想法是不正确的,标题文本之所以不采用body元素设置的字号,是因为标题标记h1~h6有默认字号样式,这时默认字号覆盖了继承的字号。
2.CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一个元素上,这时就会出现优先级的问题。
使用不同的选择器对用一个元素设置文本颜色,这时浏览器会根据选择器的优先级规则解析CSS样式。其实CSS为每一种基础选择器都分配了一个权重,其中,标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100。这样id选择器就具有最大的优先级。
对于由多个基础选择器构成的复合选择器(并集选择器除外),其权重为这些基础选择器权重的叠加。
p strong{color:black;} /*权重为:1+1*/ strong.blue{color:green;} /*权重为:1+10*/ .father strong{color:yellow} /*权重为:10+1*/ p.father strong{color:orange;} /*权重为:1+10+1*/ p.father .blue{color:gold;} /*权重为:1+10+10*/ #header strong{color:pink;} /*权重为:100+1*/ #header strong.blue{color:red;} /*权重为:100+1+10*/
对应HTML结构为:
<p class="father" id="header"> <strong class="blue">文本的颜色</strong> </p>
这时页面文本应为权重最高的样式,即为红色。
在考虑权重的时候还应注意一些特殊情况。
- 继承样式的权重为0,即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,它的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
- 行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,它拥有比上面提高的选择器都大的优先级。
- 权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
- CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近,!important都具有最大优先级。
需要注意的是,复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>复合选择器权重的叠加</title> <style type="text/css"> .inner{text-decoration:line-through;} /*类选择器定义删除线,权重为10*/ div div div div div div div div div div div{text-decoration:underline;} /*后代选择器定义下划线,权重为11个1的叠加*/ </style> </head> <body> <div > <div><div><div><div><div><div><div><div><div> <div class="inner">文本的样式</div> </div></div></div></div></div></div></div></div></div> </div> </body> </html>
上述例子中共使用了11对<div>标记,它们层层嵌套,对最里层的<div>应用类inner。
这时可以使用后代选择器或类选择器定义最里层div的样式。如果仅仅将基础选择器的权重相加,后代选择器div div div div div div div div div div div(包含11层div)的权重为11,大于类选择器.inner的权重10,文本将添加下划线。
文本并没有像预期的那样添加下划线,而显示了类选择器.inner定义的删除线,即类选择器.inner的权重大于后代选择器div div div div div div div div div div div。无论再在外层添加多少个div标记,即复合选择器的权重无论为多少个标记选择器的叠加,其权重都不会高于类选择器。同理,复合选择器的权重无论为多少个类选择器和标记选择器的叠加,其权重都不会高于id选择器。