學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
CSS
CSS層疊性
所謂層疊性是指多種CSS樣式疊加的處理方案。
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>層疊性</title>
<style>
.box {
background-color: red;
color: yellow;
height: 200px;
width: 200px;
}
.wrap {
background-color: green;
}
</style>
</head>
<body>
<div class="box wrap">
俺是div標籤
</div>
</body>
</html>
頁面：
CSS繼承性
所謂繼承性是指書寫CSS樣式表時，子標記會繼承父標記的某些樣式，如文本顏色和字號。
- 圖示
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繼承性</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<div class="box">
我是div
<p>
我是段落
</p>
</div>
</body>
</html>
頁面：
- 舉個例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繼承性</title>
<style>
.box {
color: red;
}
body {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
我是div
<p>
我是段落
</p>
</div>
</body>
</html>
頁面：
- 注意事項
恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性。但是，如果在網頁中所有的元素都大量繼承樣式，那麼判斷樣式的來源就會很困難，所以，如字體、字號、顏色、行距等樣式，我們可以在body標籤中統一設置，然後通過繼承影響文檔中所有文本。
所有與文字相關的都可以繼承，比如：color、text-系列、font-系列、line-系列、cursor等；
並不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：邊框、外邊距、內邊距、背景、定位、元素寬高屬性。
CSS的優先級(特殊性)
內聯樣式優先級最高；
ID選擇器的優先級，僅次於內聯樣式；
類選擇器優先級低於ID選擇器；
標籤選擇器低於類選擇器。
- 優先級圖示
- 舉個例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS特殊性</title>
<style>
#txt-wrap {
background-color: red;
}
.box {
color: red;
background-color: yellow;
}
/*層疊性是指： 在樣式的優先級相同的情況下才會考慮的*/
</style>
</head>
<body>
<div class="box" id="txt-wrap" style="color: blue;">
我是div的文字
</div>
</body>
</html>
頁面：
- 舉個例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器案例</title>
<style>
body {
color: red; /*繼承的樣式 > 瀏覽器默認的樣式 */
}
* {
color: blue; /*通配符選擇器的樣式 > 繼承的樣式*/
}
h1 {
color: green; /*標籤選擇器的樣式 > 通配符選擇器的樣式*/
}
.title-demo {
color: purple; /*類選擇器的樣式 > 標籤選擇器的樣式的優先級*/
}
#id-title {
color: yellow; /*id選擇器的優先級 > 類選擇器的樣式*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一個標題</h1>
</div>
<div class="aside-dd">
<p>我是一個段落</p>
</div>
</div>
</div>
</body>
</html>
頁面：
- 結論
- 繼承的樣式的優先級 > 瀏覽器默認樣式的優先級
- 通配符選擇器樣式的優先級 > 繼承的樣式的優先級
- 標籤選擇器的樣式的優先級 > 通配符選擇器的樣式的優先級
- 類選擇器的樣式的優先級 > 標籤選擇器的樣式的優先級
- id選擇器的優先級 > 類選擇器的樣式的優先級
- 行內樣式的優先級 > id選擇器的優先級
複合選擇器的優先級
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。
現在我有3個複合選擇器，它們分別是：
選擇器A：ID選擇器 類選擇器 ID選擇器
選擇器B：類選擇器 類選擇器 標籤選擇器
選擇器C：標籤選擇器 標籤選擇器 類選擇器 類選擇器
請問它們的如何排它們的優先級？
我們都知道：
ID選擇器優先級 > 類選擇器優先級 > 標籤選擇器優先級
這裏，我們將這3個複合選擇器中各個選擇器的數量分別計算出來，並繪製成表格，進行優先級比較：
| 複合選擇器名 | ID選擇器 | 類選擇器 | 標籤選擇器 |
|---|---|---|---|
| 選擇器A | 2 | 1 | 0 |
| 選擇器B | 0 | 2 | 1 |
| 選擇器C | 0 | 2 | 2 |
可以看到，選擇器A的ID選擇器數量爲2，在3個選擇器中數量最多，所以它的優先級最高；在剩下的兩個選擇器中，選擇器B和選擇器C的類選擇器數量都一樣多，所以我們再對他們的標籤選擇器數量進行比較；我們發現，選擇器C的標籤選擇器數量大於選擇器選擇器B，所以選擇器C的優先級大於選擇器B的優先級。
也就是說，優先級先後順序爲：
選擇器A > 選擇器C > 選擇器B
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器案例</title>
<style>
.aside .aside-dt h1 {
background-color: silver;
}
.aside #title-txt #id-title {
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一個標題</h1>
</div>
<div class="aside-dd">
<p>我是一個段落</p>
</div>
</div>
</div>
</body>
</html>
頁面：
關於優先級權重的注意事項
繼承樣式的權重爲0，即在嵌套結構中，不管父元素樣式的權重多大，當被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器案例</title>
<style>
.aside .aside-dt h1 {
background-color: silver;
}
.aside #title-txt {
/*
雖然.aside .aside-dt h1選擇器的優先級低於.aside #title-txt選擇器的優先級，
但是div標籤爲h1標籤的父標籤，h1標籤的樣式會覆蓋掉div標籤的樣式
所以在這裏複合選擇器的優先級沒有起到作用
*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一個標題</h1>
</div>
<div class="aside-dd">
<p>我是一個段落</p>
</div>
</div>
</div>
</body>
</html>
頁面：
