CSS三大特性簡介
CSS（層疊樣式表）三大特性：層疊性、繼承性、優先級。
一、CSS層疊性
所謂的層疊性是指多種CSS樣式的疊加。是瀏覽器處理衝突的一個能力，如果一個屬性通過兩個相同選擇器設置到同一個元素上面，那麼這時候一個屬性就會將另一個屬性層疊掉。
比如先給某個標籤指定了內部文字顏色會紅色，接着又指定了顏色爲藍色，那麼此時出現了一個標籤指定了相同樣式的不同值的情況，這類情況我們就稱之爲樣式衝突。
一般情況下，如果出現了樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。
- 1、樣式衝突，遵循的原則就是就近原則，哪個樣式離着結構近，就執行哪個樣式；
- 2、樣式不衝突，則不會層疊；
【樣例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三大特性-層疊性</title>
<style>
div {
color: blue;
font-size: 25px;
}
div {
color: grey;
}
</style>
</head>
<body>
<div>三大特性-層疊性</div>
</body>
</html>
二、CSS繼承性
所謂的繼承性是指書寫CSS樣式表的時候，子標籤會繼承父標籤的某些樣式（不是全部，一般來說是跟文字相關的屬性）。如文本顏色和字號，想要設置一個可繼承的屬性，只需要將它應用於父元素即可。
- 恰當的使用繼承可以簡化代碼，降低CSS樣式的複雜性，子元素可以繼承父元素的樣式屬性有text-，font-，line-，color等這些元素。
【樣例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三大特性-繼承性</title>
<style>
.baba {
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<div class="baba">
<p>三大特性-繼承性</p>
</div>
</body>
</html>
三、CSS優先級
定義CSS樣式的時候，經常會出現兩個或者多個規則應用在同一個元素上面的情況，這時就會出現優先級的問題，這個時候會引出“權重”的概念。
- 繼承樣式的權重爲0，即在嵌套結構中，不管父元素樣式的權重有多大，被子元素繼承時，它的權重都是0，也就是說子元素定義的樣式會覆蓋繼承過來的樣式；
- 行內樣式優先，應用style屬性的元素，其行內樣式的權重非常高；
- 權重相同的時候，CSS遵循的就是上面說的就近原則，也就是說靠近元素的樣式具有最大的優先級，或者說排在最後的樣式具有最大的優先級；
- CSS中還定義了一個！important命令，該命令被賦予了最大的優先級，也就是說不管權重如何以及樣式的位置遠近，它的優先級最大。
總結一下權重的知識點：
|
繼承或者*的權重 |
0,0,0,0 |
|
每個元素（標籤）的權重 |
0,0,0,1 |
|
每個類/僞類的權重 |
0,0,1,0 |
|
每個ID的權重 |
0,1,0,0 |
|
每個行內樣式的權重 |
1,0,0,0 |
|
每個！important的權重 |
無窮大（∞） |
【樣例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三大特性-優先級</title>
<style>
.baba { /* 權重 0,0,1,0 */
color: blue;
}
div { /* 權重 0,0,0,1 */
color: red;
}
#yeye { /* 權重 0,1,0,0 */
color: pink;
}
div { /* 權重 ∞ */
color: hotpink!important;
}
* { /* 權重 0,0,0,0 */
color: grey;
}
/* 行內權重 1,0,0,0 */
</style>
</head>
<body>
<div class="baba" id="yeye" style="color: yellow">三大特性-優先級</div>
</body>
</html>
比如下面的例子：
|
Div ul li |
0,0,0,3 |
|
.nav ul li |
0,0,1,2 |
|
a:hover |
0,0,1,1 (僞類) |
|
.nav a |
0,0,1,1 |
|
#nav p |
0,1,0,1 |
數位之間沒有進制，比如說：0,0,0,5+0,0,0,5 = 0,0,0,10（而不是0,0,1,0）；
【樣例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繼承權重爲0</title>
<style>
.baba {
color: blue!important;
}
p {
color: red;
}
</style>
</head>
<body>
<div class="baba">
<p>繼承的權重爲0</p>
</div>
</body>
</html>
