-
理解CSS的层叠性与继承性
(1)层叠性
所谓层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义< p >标记字号大小为12像素,链入式定义< p >标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加。
(2)继承性
所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号。例如,定义主体元素body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他的标记都嵌套在< body >标记中,是< body >标记的子标记。
并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性 -
掌握CSS的优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。为了体验CSS优先级,首先来看一个具体的例子,其CSS样式代码如下:
p{color:red;} /*标记样式*/
.blue{color:green;} /*class样式*/
#header{color:blue;} /*id样式*/
对应的HTML结构为:
<p id="header" class="blue">
帮帮我,我到底显示什么颜色?
</p>
标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100.因此文本显示为蓝色。
在考虑权重时,初学者好需要注意一些特殊的情况,具体如下:
(1)继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,它的权重都为0。
例如:
strong{color:red;}
#header{color:green;}
对应的HTML结构为:
<p id="header" class="blue">
<strong>继承样式不如自己定义</strong>
</p>
虽然#header具有权重100,但被strong继承时权重为0,而strong选择器的权重虽然仅为1,但它大于继承样式的权重,所以页面中的文本显示为红色。
(2)行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,它拥有比上面提到的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,同等情况下该命令增大优先级。