CSS三大特性
繼承性
什么是繼承性?
作用: 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
示例代碼:
<style>
div{
color: red;
}
</style>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<!--p會變成紅色-->
- 注意點:
- 并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
- 繼承性中的特殊性
- a標簽的文字顏色和下劃線是不能繼承的
- h標簽的文字大小是不能繼承的
<style>
div{
color: red;
text-decoration: none;
font-size: 30px;
}
</style>
<div>
<a href="#">我是超鏈接</a>
</div>
<div>
<h1>我是大標題</h1>
</div>
<!--a的顏色和下劃線不會發(fā)生變化, H的字體大小不對 -->
- 應用場景:
- 一般用于設置網頁上的一些共性信息, 例如網頁的文字顏色, 字體,文字大小等內容
body{
font-size: 30px;
font-family: "微軟雅黑"
color: #666;
}
層疊性
CSS全稱 Cascading StyleSheet (層疊式樣式表), 其中的層疊就是指層疊性
什么是層疊性?
作用: 層疊性就是CSS處理沖突的一種能力
示例代碼
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
<p id="identity" class="para">我是段落</p>
<!-- 最終顯示藍色, 因為紅色被覆蓋掉了 -->
- 注意點:
- 層疊性只有在多個選擇器選中"同一個標簽", 然后又設置了"相同的屬性", 才會發(fā)生層疊性
優(yōu)先級
什么是優(yōu)先級?
作用:當多個選擇器選中同一個標簽, 并且給同一個標簽設置相同的屬性時, 如何層疊就由優(yōu)先級來確定
優(yōu)先級判斷的三種方式
間接選中就是指繼承
如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
<style>
li{
color: blue;
}
ul{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最終顯示藍色 -->
- 相同選擇器(直接選中)
- 如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
<style>
p{
color: blue;
}
p{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最終顯示紅色 -->
- 不同選擇器(直接選中)
- 如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優(yōu)先級來層疊
- id>類>標簽>通配符>繼承>瀏覽器默認
<style>
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最終顯示紫色 -->
- 注意點:
- 通配符選擇器也是直接選中
優(yōu)先級權重
什么是優(yōu)先級的權重?
作用: 當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優(yōu)先級最高
權重的計算規(guī)則
首先先計算選擇器中有多少個id, id多的選擇器優(yōu)先級最高
如果id的個數(shù)一樣, 那么再看類名的個數(shù), 類名個數(shù)多的優(yōu)先級最高
如果類名的個數(shù)一樣, 那么再看標簽名稱的個數(shù), 標簽名稱個數(shù)多的優(yōu)先級最高
如果id個數(shù)一樣, 類名個數(shù)也一樣, 標簽名稱個數(shù)也一樣, 那么就不會繼續(xù)往下計算了, 那么此時誰寫在后面聽誰的
示例代碼
<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
作用: 用于提升某個直接選中標簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高
示例代碼
<style>
#identity{
color: purple;
font-size: 50px;
}
.para{
color: pink ;
}
p{
color: green !important;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最終顯示綠色 -->
- 注意點:
- !important只能用于直接選中, 不能用于間接選中
- 通配符選擇器選中的標簽也是直接選中的
- !important只能提升被指定的屬性的優(yōu)先級, 其它的屬性的優(yōu)先級不會被提升
- !important必須寫在屬性值得分號前面
- !important前面的感嘆號不能省略
學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038
