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