##### 6 樣式繼承 CSS的樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。總的來說，一個HTML文檔就是一個家族，然後html元素有兩個子元素，相當於它的兒子，分別是head和body，然後body和head各自還會有自己的兒子，最終形成了一張以下的家族譜。 
在上圖中，可以看到，body的子元素有三個，h1、p和ul，ul也有幾個子元素，p也有1個子元素，那麼li和a就都是body的後代元素。有時可能我們在body裡面設置了一些屬性，結果，body下麵所有的後代元素都可能享受到，這就是樣式繼承。就像一句俗語一樣，“龍生龍，鳳生鳳，老鼠的兒子會打洞”。樣式繼承，可以給我們的網頁佈局帶來很多的便利，讓我們的代碼變得更加簡潔，但是，如果不瞭解，或者使用不當，也有可能會給我們帶來很多不必要的麻煩。
因此，如果瞭解了哪些樣式是會繼承到後代元素的，那麼就可以避免這些問題的發生了。
| 文本相關屬性 | |||
|---|---|---|---|
| font-family | font-size | letter-spacing | line-height |
| font-style | font-variant | text-align | text-indent |
| font-weight | font | text-transform | word-spacing |
| color | direction | ||
| 列表相關屬性 | |||
| list-style-image | list-style-position | list-style-type | list-style |
| 表格和其他相關屬性 | |||
| border-collapse | border-spacing | caption-side | empty-cells |
| cursor |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css樣式繼承</title>
<style>
.c1{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">item1</div>
<p>item2</p>
<div>
<p>item3</p>
</div>
</div>
</body>
</html>
執行結果：
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17640461.html
