文章目錄
CSS有三大特性，分別是 繼承性，層疊性，優先級。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{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依舊是子元素</p>
</div>
</div>
</body>
</html>
效果如下：
有圖可見，被div包裹住的元素，都具有了div的css樣式屬性，這被我們稱為繼承性。
在CSS中以，text-,font-,line-開頭的屬性都是可以繼承的。
CSS繼承的局限性
并不是所有的CSS屬性都可以被繼承的，以下就不具有繼承性：
a標簽的字體顏色不會被繼承，a標簽的字體顏色是不會改變的，可以通過頁面的的F12可以查看到，a標簽是有一個默認的color:-webkit-link;字體顏色屬性，所以父元素設置顏色是不能發生改變a標簽字體的顏色。
h標簽的字體的大小也是不能被繼承的，如下代碼給父元素在設置一個字體屬性20px，再添加一個h標簽，在瀏覽器中可以發現h標簽中字體的大小是不會發生改變的，因為h標簽中有一個默認的font-size:1.5em;字體大小屬性。
div標簽的高度如果不設置由內容來絕對（沒有內容高度未0），寬度默認由父元素繼承過來
邊框屬性
外邊距屬性
內邊距屬性
背景屬性
定位屬性
布局屬性
元素寬高屬性
層疊性
層疊性的使用說明
層疊性的表述
所謂層疊性是指多種CSS樣式的疊加，例如，當使用內嵌式CSS樣式表定義p標記字號大小為12像素，ID選擇器定義p標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。
例：
<!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>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我這里體現了層疊性呀</p>
</body>
</html>
使用結論
由于內容有限，但是結論是一定的，所以我直接給出結論：
若多個選擇器定義的樣式不沖突，則元素應用所有選擇器定義的樣式。
若多個選擇器定義的樣式發生沖突（比如：同時定義了字體顏色屬性），則CSS按照選擇器的優先級，讓元素應用優先級搞得選擇器樣式。
CSS定義的選擇器優先級從高到低為：行內樣式–>ID樣式–>類樣式–>標記樣式。
如若想直接定義使用哪個樣式，不考慮優先級的話，則使用!important，把這個加在樣式后面就行了。
優先級
定義CSS樣式時，經常出現兩個或更多規則應用在同一個元素上，這時就會出現優先級的問題。層疊性和選擇器的圈中有很大的關系。
優先級的使用說明
權重分析：
內聯樣式：如：style=""，權重為1000。
ID選擇器，如：#content，權重為100。
類，偽類和屬性選擇器，如.content，權重為10。
標簽選擇器和偽元素選擇器，如div p，權重為1。
繼承樣式，權重為0。
將基本選擇器的權重相加之和，就是權重大小，值越大，權重越高。
計算權重方法
數標簽：先數權重最高的標簽，然后數第二高權重的標簽，以此類推，就會生成一個數組，里面包含四個數字。
比如（0，0，0，0）分別對應（行內式個數，id選擇器個數，類選擇器個數，標簽選擇器個數）
然后兩個選擇器通過對別四個數字的大小，確定權重關系。
例：
#box ul li a.cur有1個id標簽，1個類，3個標簽，那么4個0就是（0，1，1，3）
.nav ul .active .cur有0個id，3個類，1個標簽，那么4個0就是（0，0，3，1）
例：
<!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>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我們來試一下優先級</p>
</body>
</html>
先推測一波，因為前面講到了ID選擇器的權重是大于類選擇器的，所以這里顏色應該為red。
效果如下：
推測正確！優先級GET！
