三大特性(繼承性，層疊性，優先級)
CSS有三大特性分別是: 繼承性，層疊性，優先級。
一、繼承性
概念 給父元素設置一些屬性，子元素也可以使用，這個我們就稱之為繼承性。
注意
1.並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
3.繼承性中的特殊性
3.1 a標簽的文字顏色和下划線是不能繼承的
3.2 h標簽的文字大小是不能繼承的
示例
<!-- 樣式部分 -->
<style type="text/css">
.father {
width: 300px; /*設置寬度*/
font-size: 20px; /* 設置字體*/
text-align: right; /* 字體右對齊*/
background-color: green; /*背景顏色綠色*/
color:red; /*字體顏色紅色*/
}
</style>
<!-- html部分 -->
<body>
<div class="father">father標簽
<p>father子標簽 p</p>
</div>
</body>
運行結果
從這個例子中可以看出子標簽p繼承了父類div的樣式。
二、層疊性
概念 層疊性就是CSS處理沖突的一種能力。層疊性只有在多個選擇器選中 同一個標簽, 然后又設置了相同的屬性, 才會發生層疊性。
示例
<html>
<head>
<title>CSS三大特性之層疊性</title>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: black">我是段落</p> <!-- 最終顯示black 就近原則 black > blue > red -->
</body>
</html>
在相同優先級的的情況下 下面的樣式元素會將上面的層疊掉。
三、CSS優先級
概念 當多個選擇器選中同一個標簽, 並且給同一個標簽設置相同的屬性時, 如何層疊就由優先級來確定。
優先級
!important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承
補充說明
1、繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
2、行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。
3、權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。
4、CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。
關於CSS權重，有一套計算公式來去計算，用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。
部分權重是可以疊加的。比如的例子：
div ul li ------> 0,0,0,3
a:hover -----—> 0,0,1,1
.son ul li ------> 0,0,1,2
.son a ------> 0,0,1,1
#son p ------> 0,1,0,1
注意
對於並集選擇器來說不是權重的加和，因為理論上它還是獨立的，它只相當於將多個選擇器的相同內容歸於一個並集選擇器中，理論上每一個選擇器還是獨立的。
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div,p {
color: green; /*這里不能是0,0,0,2 而是兩個0,0,0,1*/
}
p {
color: red; /*對於p標簽最終會顯示紅色 0,0,0,1 (因為和上面優先級一樣，所以下面會覆蓋上面樣式)*/
}
</style>
</head>
<body>
<p>標簽什么顏色</p>
</body>
</html>
四、經典測試題
這里舉幾個測試題來鞏固下css優先級的知識。首先我們要知道如何推斷標簽的最終樣式
1. 先找到影響文字的最里面的盒子
2. 然后計算權重
3. 如果權重一樣，看層疊性
1、第一題
<!DOCTYPE>
<html>
<head>
<title>第2題</title>
<style type="text/css">
#father{
color:red; /* 繼承的權重為 0,0,0,0 */
}
p{
color:blue; /* 權重 0,0,0,1 */
}
</style>
</head>
<body>
<div id="father">
<p>試問這行字體是什么顏色的？</p>
</div>
</body>
</html>
答案 藍色。
2、第二題
<!DOCTYPE>
<html>
<head>
<title>第1題</title>
<style type="text/css">
#father #son{ /*權重: 0,2,0,0 */
color:blue;
}
#father p.c2{ /* 權重: 0,1,1,1 */
color:black;
}
div.c1 p.c2{ /* 權重 0,0,2,2 */
color:red;
}
#father{
color:green !important; /* 繼承的權重為 0,0,0,0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
試問這行字體是什么顏色的？
</p>
</div>
</body>
</html>
答案 藍色。
3、第三題
<!DOCTYPE>
<html>
<head>
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{ /* 權重 0,0,0,11 (最后一位數再怎么相加都不會向前進一位) */
color:red;
}
.me{
color:blue; /* 權重 0,0,1,0 */
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">試問這行文字是什么顏色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 藍色。
4、第四題
<!DOCTYPE>
<html>
<head>
<title>第四題</title>
<style type="text/css">
.c1 .c2 div{ /* 權重 0,0,2,1 */
color: blue;
}
div #box3{ /* 權重 0,1,0,1 */
color:green;
}
#box1 div{ /* 權重 0,1,0,1 */
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字顯示什么顏色
</div>
</div>
</div>
</body>
</html>
答案 黃色 （如果權重一樣，看層疊性）
``` 你如果願意有所作為，就必須有始有終。(6) ```