CSS的三大特性：層疊性、繼承性和優先級
層疊性:
其含義就是相同的選擇器設置相同的樣式的時候，此時一個樣式會覆蓋另一個衝突的樣式。
原則：樣式衝突，遵循的原則就是就近原則，哪個樣式離着結構近就執行哪個樣式。樣式不衝突的時候，不會重疊。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*設置div標籤中的文字顏色爲黃色*/
div {
color: red;
font-size: 24px;
}
/*設置div標籤中的文字顏色爲黃色*/
div {
color: yellow;
}
</style>
</head>
<body>
<div>長江後浪推前浪，前浪死在了沙灘上</div>
</body>
</html>
運行上面的例子可以看出：在瀏覽器中顯示的結果是div中文字的顏色是黃色，第二個div的設置覆蓋了第一個的結果。但是文字大小上顯示的事第一個div設置的結果。
繼承性
子標籤繼承父標籤的某些樣式。在我們寫代碼的時候，適當的使用繼承可以簡化代碼，降低CSS樣式的複雜性。
子元素可以繼承父元素的樣式如下：text-、font-、line-這些元素開頭的可以繼承，以及color屬性。實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<div>
<p>長江後浪推前浪，前浪死在了沙灘上</p>
</div>
</body>
</html>
上面實例p標籤繼承了div標籤的屬性。
繼承性中有一個特殊的繼承：行高的繼承。
- 行高可以跟單位也可以不跟單位
- 如果子元素沒有設置行高，則會繼承父元素的行高爲15
- 此時子元素的行高是：當前子元素的文字大小*15
- body行高1.5這樣寫法最大的優勢就是裏面子元素可以根據自己文字大小自動調整行高
優先級
優先級是根據權重來規定的。
優先級注意點
- 權重是有4組數字組成但是不會有進位
- 可以理解爲類選擇器永遠大於元素選擇器,id選擇器永遠大於類選擇器以此類推
- 等級判斷從左向右，如果某位數值相同，則判斷下一位數值
- 可以簡單記憶法:通配符和繼承權重爲0,標籤選擇器爲1,類（僞類）選擇器爲10，id選擇器100，行內樣式表爲1000 ，important：無窮大
- 繼承的權重是0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0
如果是複合選擇器，則會有權重的增加。需要計算權重。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*important的權重無窮大，因此不會被覆蓋*/
div {
color: blue !important;
font-size: 24px;
}
div {
color: yellow;
}
</style>
</head>
<body>
<div>
<p>長江後浪推前浪，前浪死在了沙灘上</p>
</div>
</body>
</html>