CSS繼承性及層疊性
我們知道，對於面向物件開發語言， 比如：Java、C++、JavaScript、C#等的都有一個非常重要的特性，也就是繼承性。那麼在CSS中也有這樣的特性。
CSS繼承性
CSS中父元素的一些屬效能夠被其後代元素繼承，在這實際開發中非常的重要。先通過一個簡單的列子來感知一下CSS的繼承性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div 執行圖：
哎，這樣利用CSS的繼承性我們就可以把一些通用的屬性寫在父元素裡，對於特殊的屬性我們自己在來處理，那麼CSS中哪些屬效能夠被繼承
1. color
2. font-開頭
3. text-開頭
4. line-開頭
再來看一個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color: red;
font-size: 16px;
text-decoration: underline 執行圖:
看見了吧，這就是CSS繼承性的一些用法，而且無論後代元素多深，都能夠繼承到父元素的這些屬性，也就是說繼承性是從自己開始，直到最小的元素。
CSS的層疊性
就是css處理衝突的能力。 所有的權重計算，沒有任何相容問題！
我們假設一個場景，html程式碼中有一個p標籤，該p標籤有類選擇器和id選擇器，同時分別使用標籤選擇器、類選擇器及id選擇器來給該p標籤的文字賦予字型顏色的語義化，那麼該p標籤最終是什麼顏色的尼？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: rebeccapurple;
}
.pp {
color: red;
}
#para1 {
color: blue;
}
</style>
</head>
<body>
<p class="pp" id="para1">猜猜我是什麼顏色</p>
</body>
</html>哎呀，這個p標籤到底是什麼顏色啊？如果不懂CSS層疊性的小夥伴們可能一下子就懵逼了。來看看執行效果圖就知道了。
最終答案是綠色。也不給大家賣關子了，其實對於層疊性，是有規律可循的。那麼這個規律是什麼勒？再看一個例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#b1 .box2 p{
color: rebeccapurple;
}
.box1 .box3 p {
color: red;
}
div.box1 div.box2 div.box3 p {
color: blue;
}
</style>
</head>
<body>
<div class="box1" id="b1">
<div class="box2" id="b2">
<div class="box3" id="b3">
<p>猜猜我是什麼顏色</p>
</div>
</div>
</div>
</body>
</html>看執行圖：
我們可以看到，最終p標籤的文字是黃色的。這層疊性到底怎麼能夠讓我們一下子知道哪些選擇器被層疊掉了勒？
我們從上面的例子可以觀察到，對於第一組選擇器有1個id選擇器1個類選擇器1個標籤選擇器，我們可以記住1,1,1。第二組0個id選擇器2個類選擇器1個標籤選擇器，記作0,2,1。類推下去，我們要數id選擇器、類選擇器、標籤選擇器的個數。
這些選擇器是不進位的，也就是說無論id選擇器、類選擇器、標籤選擇器分別對應的個數是多少都不會進位，但其實又是進位的，比如255個標籤選擇器等同於1個類選擇器，但是沒有任何實際意義。
那麼對於層疊性的權重是一樣的，該怎麼去判斷？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#b1 .box2 p{
color: yellow;
}
#b1 div .pp{
color: red;
}
</style>
</head>
<body>
<div class="box1" id="b1">
<div class="box2" id="b2">
<div class="box3" id="b3">
<p class="pp">猜猜我是什麼顏色</p>
</div>
</div>
</div>
</body>
</html>看到上面的兩組選擇器權重都是1,1,1.那麼最終有效的是哪個？
發現選擇了第二個，也就是說如果權重相同，就選擇最後一個。
上面我們都說的是該標籤是直接被選擇到，那麼對於沒有直接選擇到的，該怎麼處理，先看程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#b1 #b2 #b3{
color: yellow;
}
div.box1 div.box2 div.box2{
color: red;
}
p{
color: green;
}
</style>
</head>
<body>
<div class="box1" id="b1">
<div class="box2" id="b2">
<div class="box3" id="b3">
<p class="pp">猜猜我是什麼顏色</p>
</div>
</div>
</div>
</body>
</html>我們看到，第一組選擇器的權重按照我們上面的規律來看是3,0,0；第二組是0,3,3；第三組是0,0,1。按道理最終該p標籤文字顏色應該是黃色，那麼到底是不是？
發現最終是綠色的。到底為啥會這樣勒?因為第一組、第二組選擇器都沒有直接選擇上p標籤，它們的權重最終都是0,0,0，這樣第一組、第二組權重為0第三組權重為：0,0,1。
CSS層疊性總結：
1. 當選擇器，選擇上了某個元素的時候，那麼要這麼統計權重(id的數量，類的數量，標籤的數量)
2. 不進位，實際上能進位（奇淫知識點：255個標籤，等於1個類名）但是沒有實際意義！
3. 如果權重一樣，那麼以後出現的為準
4. 如果不能直接選中某個元素，通過繼承性影響的話，那麼權重是0。
5. 如果大家都是0，那麼有一個就近原則：誰描述的近，聽誰的。
OK，關於CSS繼承性和層疊性就介紹到這裡，這篇文章中的內容很重要很重要很重要哦