CSDN話題挑戰賽第2期
參賽話題：學習筆記
目錄
1.繼承性
2.層疊性
3.優先級
基本概念
權重疊加計算
1.繼承性
特性：子元素有預設繼承父元素樣式的特點
作用：恰當的使用繼承可以簡化代碼，降低CSS樣式的複雜性
可以繼承的常見屬性：color、font-style、font-weight、font-size、font-family、text系列、line系列等。
總的來說就是控制文字的都能繼承，而其他不能繼承。
繼承失效的情況：
- a标簽本身具有color顔色屬性，繼承失效
- 标題h系列本身具有font-size字型大小屬性，繼承失效
案例示範：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 繼承性 */
div{
/* 控制文字的都能繼承，其他不能繼承 */
color: red;
font-size: 20px;
height: 100px;
}
</style>
</head>
<body>
<div>
div
<span>span</span>
<a href="" target="_blank" rel="external nofollow" >超連結</a>
<h1>h1</h1>
</div>
</body>
</html>
CSS三大特性---繼承性、層疊性、優先級
上圖中a标簽不能繼承紅色，h1标簽不能繼承字型大小。
2.層疊性
CSS全名叫Cascading Style Sheet（層疊樣式表），名字就說明了它所具有的屬性---層疊性。
特性：
- 給同一個标簽設定不同的屬性，樣式會層疊疊加，共同作用在标簽上
- 給同一個标簽設定相同的屬性，樣式會層疊覆寫，最終寫在最後的樣式才會生效
注意：當樣式沖突時，隻有當選擇器優先級相同，才能通過層疊性判斷結果。
如：
div{
color: red;
color: blue;
}
此時div中的文字會顯示藍色而不是兩者都有。
3.優先級
優先級特性是一個比較重要的特性。
基本概念
特性：不同選擇器具有不同優先級，優先級高的選擇器樣式會覆寫優先級低的選擇器樣式。
優先級公式：
- 繼承<通配符選擇器<标簽選擇器<類選擇器<id選擇器<行内樣式<!important
!important注意點：
1.!important寫在屬性值後面，分号的前面。
2.!important不能提升繼承的優先級，隻要是繼承，優先級必然最低。
3.實際開發不推薦使用!important。
案例示範：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 繼承 */
body{
color: red;
}
/* 标簽選擇器 */
div{
color: green !important;
}
/* 類選擇器 */
.box{
color: blue;
}
/* 類選擇器 */
#box{
color:orange ;
}
</style>
</head>
<body>
<!-- 行内樣式 -->
<div class="box" id="box" style="color:pink">div</div>
</body>
</html>
最終顯示的是綠色，優先級最高。
CSS三大特性---繼承性、層疊性、優先級
權重疊加計算
我們知道選擇器可以複合，那麼此時的選擇器優先級就要通過權重疊加的方法來計算，判斷最終哪個選擇器優先級最高會生效。
權重疊加計算公式：
比較規則：
- 從左往右優先級一次遞減
- 先比較第一級，結果出來了其他不用看，如果相同個數則繼續比較下去
- 如果最終全部數字相同，則按層疊性來顯示（後面的）
案例示範：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* (行内,id,類,标簽) */
/* (0,1,0,1) */
div #one{
color: orange;
}
/* (0,0,2,0) */
.father .son{
color: skyblue;
}
/* (0,0,1,1) */
.father p{
color: purple;
}
/* (0,0,0,2) */
div p{
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">p标簽</p>
</div>
</body>
</html>
最終顯示的是橙色，第二級比較出來。