CSS继承

• 继承属性：当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。

• 非继承属性：当元素的一个非继承属性没有指定值时，则取属性的初始值。

哪些样式属性可以继承？

不可继承的：

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、因为有继承父级样式，所以是红色

参考：

---

MDN

csdn作者：李留白