CSS继承
2018-03-08 本文已影响15人
取个帅气的名字真好
-
继承属性：当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。
-
非继承属性：当元素的一个非继承属性没有指定值时，则取属性的初始值。
哪些样式属性可以继承？
不可继承的：
display | position
margin | left
border | right
padding | top
background | bottom
height | z-index
min-height | float
max-height | clear
width | table-layout
min-width | vertical-align
max-width | page-break-after
overflow | page-bread-before
unicode-bidi |
所有元素可继承：
visibility
cursor
内联元素可继承：
letter-spacing
word-spacing
white-space
line-height
color
font
font-family
font-size
font-style
font-variant
font-weight
text-decoration
text-transform
direction
块状元素可继承：
text-indent
text-align
列表元素可继承：
list-style
list-style-type
list-style-position
list-style-image
表格元素可继承：
border-collapse
控制继承
CSS为处理继承提供了三种特殊的通用属性值：
inherit：该值将应用到选定元素的属性值设置为与其父元素一样（继承）
initial：初始值（浏览器默认样式）
unset：如果有继承父级样式，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。优先用inherit的样式，其次会应该用initial的样式。
<style>
body {
color: red;
}
.inherit a {
color: inherit;
}
.initial a {
color: initial
}
.unset a {
color: unset;
}
</style>
<ul>
<li>默认 <a href="#">颜色啦</a> </li>
<li class="inherit">这是Inherit <a href="#">颜色啦</a> </li>
<li class="initial">这是Reset <a href="#">颜色啦</a> </li>
<li class="unset">这是Unset <a href="#">颜色啦</a> </li>
</ul>
效果
以上说明：
1、a链接默认颜色（蓝色）
2、继承了body设置的颜色（红色）
3、浏览器默认的颜色（黑色）
4、因为有继承父级样式，所以是红色
参考：
