css的继承性

时间:2022-04-08 13:29:20

为了减少css的代码量,很多时候,我们必须要非常重视css的继承性

1.首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。多数边框类属性,比如象padding(补白),margin(边界),背景和边框的属性都是不能继承的。

2.继承中容易引起的错误

有时候继承也会带来些错误,比如说下面这条css定义:

body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将css定义成这样:

body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色。

3.继承中,优先级就显的尤为重要了。转载:http://jingyan.baidu.com/article/7f41ececcf637a593d095cfd.html

标记为!important的规则具有最高的权值,也就是说他没有具体的特性值,但是比其他的权值都要大。需要注意的是,虽然制作者定义的样式比用户定义的样式具有更高权值时,但!important规则恰恰相反:重要的用户定义规则要比制作者定义的样式具有更高权值,即使是标记为!important的重要规则也是如此。

看了这么多文字介绍后,我们来举个例子看一下:

样式定义:

h1 { color:gray !important;}

应用举例代码:

<h1 style="color:black;">看这儿!</h1>

应用举例效果:!important规则会覆盖内联style属性的内容,所以结果文字是灰色的而不是黑色的。

4.一般情况下li span li a这个时候,我们的span和a都会默认继承li中的color属性的,但是如果Hover的时候,如果lihover设置什么属性的话,那么,span 和a也会继承的。这种继承可以大大缩小我们的代码量。