CSS全稱 Cascading StyleSheet層疊樣式表
- 繼承性
- 層疊性
- 優(yōu)先級
繼承性
1.什么是繼承性?
作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
注意點:
1.并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
3.繼承性中的特殊性
a標簽的文字顏色和下劃線是不能繼承的
h標簽的文字大小是不能繼承的
應(yīng)用場景:
一般用于設(shè)置網(wǎng)頁上的一些共性信息, 例如網(wǎng)頁的文字顏色, 字體,文字大小等內(nèi)容，一般都會放到body標簽中
層疊性
1.什么是層疊性?
作用: 層疊性就是CSS處理沖突的一種能力
注意點:
層疊性只有在多個選擇器選中"同一個標簽", 然后又設(shè)置了"相同的屬性", 才會發(fā)生層疊性
CSS全稱 Cascading StyleSheet層疊樣式表
優(yōu)先級
1.什么是優(yōu)先級?
作用:當多個選擇器選中同一個標簽, 并且給同一個標簽設(shè)置相同的屬性時, 如何層疊就由優(yōu)先級來確定
2.優(yōu)先級判斷的三種方式
2.1間接選中就是指繼承(選中了父，爺標簽)
如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-CSS三大特性之優(yōu)先級</title>
<style>
li{
color: blue;
}
ul{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
</body>
</html>
2.2相同選擇器(直接選中)
如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-CSS三大特性之優(yōu)先級</title>
<style>
p{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
</body>
</html>
2.3不同選擇器(直接選中)
如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優(yōu)先級來層疊
非常重要
id>類>標簽>通配符>繼承>瀏覽器默認
!important
1.什么是!important
作用: 用于提升某個直接選中標簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高
注意點:
1.!important只能用于直接選中, 不能用于間接選中
2.通配符選擇器選中的標簽也是直接選中的
3.!important只能提升被指定的屬性的優(yōu)先級, 其它的屬性的優(yōu)先級不會被提升
4.!important必須寫在屬性值得分號前面
5.!important前面的感嘆號不能省略
color: blue !important;
優(yōu)先級的權(quán)重
1.什么是優(yōu)先級的權(quán)重?
作用: 當多個選擇器混合在一起使用時, 我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高
2.權(quán)重的計算規(guī)則
1.首先先計算選擇器中有多少個id, id多的選擇器優(yōu)先級最高
2.如果id的個數(shù)一樣, 那么再看類名的個數(shù), 類名個數(shù)多的優(yōu)先級最高
3.如果類名的個數(shù)一樣, 那么再看標簽名稱的個數(shù), 標簽名稱個數(shù)多的優(yōu)先級最高
4.如果id個數(shù)一樣, 類名個數(shù)也一樣, 標簽名稱個數(shù)也一樣, 那么就不會繼續(xù)往下計算了, 那么此時誰寫在后面聽誰的
也就是說優(yōu)先級如果一樣, 那么誰寫在后面聽誰的
注意點:
1.只有選擇器是直接選中標簽的才需要計算權(quán)重, 否則一定會聽直接選中的選擇器的
