CSS 特性
https://www.xiaobuteach.com/html/css-base/character.html?from=bili
CSS 特性
CSS包括4個特性：1）繼承性；2）疊加性；3）覆蓋性；4）優(yōu)先級。
1 繼承性
標(biāo)簽具有父標(biāo)簽的樣式屬性，同時還有自己定義的樣式屬性，即繼承性。
HTML標(biāo)簽呈樹狀結(jié)構(gòu)，父標(biāo)簽可以包含子標(biāo)簽，子標(biāo)簽可以包含孫子標(biāo)簽。
子標(biāo)簽可以繼承父標(biāo)簽的部分style屬性：這部分樣式稱之為可繼承；API手冊會標(biāo)記 Inherited: Yes。
父標(biāo)簽的部分style屬性，子標(biāo)簽無法繼承：這部分樣式稱之為不可繼承。API手冊會標(biāo)記Inherited: No。
例1：可繼承屬性
? ?<div id="div1" style="font-size: 30px;color: #f00;">
? ? ? ?div1
? ? ? ?<div id="div2">div2</div>
? ?</div>
div2繼承父標(biāo)簽div1的兩個屬性，font-size與color都是可繼承的屬性。
通過開發(fā)者工具（F12）查看，div2的樣式里具有div1定義的字體大小與顏色兩個屬性。
顯示這兩個屬性"繼承自 div#div1"。
例2：不可繼承屬性。
? ?<div id="div1" style="margin-top: 30px;border: 1px solid #00F;">
? ? ? ?div1
? ? ? ?<div id="div2">div2</div>
</div>
div2是否有自己的邊框？div2與div1的上外邊距是否有30px距離？
div1有自己的邊框與上外邊距；div2并沒有自己的邊框與上外邊距；說明margin與border是不可繼承屬性。
通過開發(fā)者工具查看，沒有看到繼承樣式。
CSS規(guī)范按照我們的日常需求非常合理的設(shè)置了哪些樣式屬于可繼承，哪些樣式不能被繼承。
可繼承樣式：字體相關(guān)屬性、等。
不可繼樣式：盒子模型、定位、等。
2 疊加性
當(dāng)一個元素匹配多個樣式規(guī)則時，如果樣式屬性名不同，則會疊加所有的樣式屬性。
示例
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>css ?| 小步教程</title>
? ?<style>
? ? ? ? p{
? ? ? ? ? ?font-size: 20px; ? ? ? ? ? ?
? ? ? ? }
? ? ? ? p{
? ? ? ? ? ?color:#f00;
? ? ? ? }
? ? ? ? .class1{
? ? ? ? ? ?border:1px solid #f00 ; ? ? ? ?
? ? ? ? }
? ? ? ? .class1{
? ? ? ? ? ?margin: 0;
? ? ? ? }
? ? ? ? #id1{
? ? ? ? ? ?text-decoration: underline;
? ? ? ? }
? ?</style>
</head>
<body>
? <p id="id1" class="class1" style="font-style: italic;">第1段</p> ?
</body>
</html>
段落匹配內(nèi)部樣式定義里的5條選擇器規(guī)則，并設(shè)置了內(nèi)聯(lián)樣式。屬性名稱各不相同，會進行疊加。
3 覆蓋性
當(dāng)一個元素匹配多個樣式規(guī)則時，如果樣式屬性名相同，則優(yōu)先級高的會覆蓋優(yōu)先級低的，相同優(yōu)先級時，后定義的會覆蓋前定義的。
代碼
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>CSS 覆蓋性 | 小步教程</title>
? ?<style>
? ? ? ? p{
? ? ? ? ? ?color:#00f; ? ? ? ? ? ?
? ? ? ? }
? ? ? ? p{
? ? ? ? ? ?font-size: 24px;
? ? ? ? ? ?color:#f00;
? ? ? ? }
? ? ? ? .class1{
? ? ? ? ? ?margin-left: 0; ? ?
? ? ? ? }
? ? ? ? .class1{
? ? ? ? ? ?margin-left: 60px;
? ? ? ? }
? ?</style>
</head>
<body>
? <p class="class1" >第1段</p> ?
</body>
</html>
p標(biāo)簽選擇器，后定義的顏色#f00會覆蓋前面的#00f；
.class1類選擇器，后定義的margin-left 60px會覆蓋前面的0。
4 優(yōu)先級
不同類型的多個選擇器定義相同的屬性名不同屬性值，會按照優(yōu)先級順充、采用優(yōu)先級高的樣式。
下節(jié)具體介紹。
