CSS三大特性
繼承性
作用
給父元素設置一些屬性, 子元素也會獲得相應的屬性
注意點
并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
在CSS的繼承中不僅兒子可以繼承, 只要是后代都可以繼承
-
繼承性中的特殊性
- a標簽的文字顏色和下劃線是不能繼承的
- h標簽的文字大小是不能繼承的
層疊性
作用
層疊性就是CSS處理沖突的一種能力
注意點
層疊性只有在多個選擇器選中"同一個標簽", 然后又設置了"相同的屬性", 才會發生層疊性，而如何層疊就由優先級來確定
優先級判斷的三種方式
-
繼承（間接選中）
- 如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
-
相同選擇器(直接選中)
- 如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
-
不同選擇器(直接選中)
- 如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優先級來層疊（id>類>標簽>通配符>繼承>瀏覽器默認，通配符選擇器也是直接選中）
優先級權重
作用
當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高
權重的計算規則
注意點
首先先計算選擇器中有多少個id, id多的選擇器優先級最高
如果id的個數一樣, 那么再看類名的個數, 類名個數多的優先級最高
如果類名的個數一樣, 那么再看標簽名稱的個數, 標簽名稱個數多的優先級最高
如果id個數一樣, 類名個數也一樣, 標簽名稱個數也一樣, 那么就不會繼續往下計算了, 那么此時誰寫在后面聽誰的
只有選擇器是直接選中標簽的才需要計算權重, 否則一定會聽直接選中的選擇器的
示例代碼
<style>
#identity1 .box2{
color: red;
}
.box1 .box2{
color: green;
}
div ul li p{
color: blue;
}
</style>
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">我是段落</p>
</li>
</ul>
</div>
<!-- id多最終顯示紅色 -->
<style>
.box1 .box2{
color: blue;
}
div .box2{
color: green;
}
</style>
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">我是段落</p>
</li>
</ul>
</div>
<!-- id一樣, 比類多, 最終顯示藍色 -->
<style>
#identity1 ul li p{
color: red;
}
#identity1 ul p{
color: green;
}
</style>
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">我是段落</p>
</li>
</ul>
</div>
<!-- id一樣, 類一樣, 比標簽多最終顯示紅色 -->
<style>
.box1 li #identity2{
color: blue;
}
#identity1 ul .box2{
color: red;
}
</style>
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">我是段落</p>
</li>
</ul>
</div>
<!-- id一樣, 類一樣, 標簽一樣, 最終顯示紅色 -->
!important
作用
用于提升某個直接選中標簽的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升為最高
-
注意點
- !important只能用于直接選中, 不能用于間接選中
- 通配符選擇器選中的標簽也是直接選中的
- !important只能提升被指定的屬性的優先級, 其它的屬性的優先級不會被提升
- !important必須寫在屬性值得分號前面
- !important前面的感嘆號不能省略
