層疊性
層疊性是指當一個標簽被設置了多個重復的樣式的時候會發生沖突，一個屬性會覆蓋另外一個屬性。
覆蓋性原則：
-
層疊性主要遵循的原則是就近原則，在不考慮優先級的情況下，在多個樣式中最終生效的樣式是離標簽最近的樣式
-
這里要注意只覆蓋同樣的不可重復的樣式屬性，不會覆蓋允許重復的屬性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
background-color: red;
}
div{
background-color: blue;
}
</style>
</head>
<body>
<div>123</div> <!-- 最終背景顏色是藍色 -->
<div style="background-color: green;">123</div> <!-- 最終背景顏色是綠色 -->
</body>
</html>
繼承性
繼承性是指當子標簽沒有設置樣式時，會繼承父標簽的樣式
子元素可以繼承父元素的樣式包括：text-文本屬性、font-字體屬性、line-行高以背景類屬性，要注意子標簽不會繼承父標簽的寬度、高度、邊距屬性
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
font-size:70px;
background-color: #CCC;
color:skyblue;
}
</style>
</head>
<body>
<div>
<p>p繼承div的樣式</p>
</div>
</body>
</html>
優先級
當一個元素制定了多個選擇器時就會有選擇器的優先級
- 選擇器相同，則執行層疊性
- 選擇器不同，優先級為，注意優先級逐級變大
- 繼承的權重為(0,0,0,0)
- 標簽選擇器的權重為(0,0,0,1)
- 類、偽類選擇器的權重為(0,0,1,0)
- id選擇器選擇器的權重為(0,1,0,0)
- 行內樣式的權重為(1,0,0,0)
!important的權重無限大，例border: 1px solid #333 !impportant
權重的疊加
如果是復合選擇器，則會有權重疊加，需要計算權重
-
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
權重只會疊加，不會進位
示例
例1
<style>
.nav li {
color: red;
}
li {
color: pink;
}
</style>
<body>
<ul class="nav">
<li>選擇器的權重</li>
</ul>
</body>
文字最后展示為紅色，.nav li權重為（0，0，1，1），而li標簽選擇器的權重最低為（0，0，0，1）
如果給標簽增加類選擇器呢
<style>
.nav li {
color: red;
}
li {
color: pink;
}
.pink {
color: pink;
}
</style>
<ul class="nav">
<li class="pink">選擇器的權重</li>
</ul>
結果還是紅色，因為類選擇器權重為（0，0，1，0），如果要使文字變成粉色，則
.nav .pink {
color: pink;
}