11-CSS基礎-CSS三大特性
11-CSS基礎-CSS三大特性
CSS三大特性
繼承性
- 什麼是繼承性?
- 作用: 給父元素設定一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
- 示例程式碼:
<style>
div{
color: red;
}
</style>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</
<!--p會變成紅色-->
- 注意點:
- 並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是後代都可以繼承
- 繼承性中的特殊性
- a標籤的文字顏色和下劃線是不能繼承的
- h標籤的文字大小是不能繼承的
<style>
div{
color
text-decoration: none;
font-size: 30px;
}
</style>
<div>
<a href="#">我是超連結</a>
</div>
<div>
<h1>我是大標題</h1>
</div>
<!--a的顏色和下劃線不會發生變化, 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>
<!-- 最終顯示藍色, 因為紅色被覆蓋掉了 -->
- 注意點:
- 層疊性只有在多個選擇器選中"同一個標籤", 然後又設定了"相同的屬性", 才會發生層疊性
優先順序
- 什麼是優先順序?
- 作用:當多個選擇器選中同一個標籤, 並且給同一個標籤設定相同的屬性時, 如何層疊就由優先順序來確定
- 優先順序判斷的三種方式
- 間接選中就是指繼承
- 如果是間接選中, 那麼就是誰離目標標籤比較近就聽誰的
<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>
<!-- 最終顯示紅色 -->
- 不同選擇器(直接選中)
- 如果都是直接選中, 並且不是相同型別的選擇器, 那麼就會按照選擇器的優先順序來層疊
- 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>
<!-- 最終顯示紫色 -->
- 注意點:
- 萬用字元選擇器也是直接選中
優先順序權重
- 什麼是優先順序的權重?
- 作用: 當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先順序最高
- 權重的計算規則
- 首先先計算選擇器中有多少個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
- 作用: 用於提升某個直接選中標籤的選擇器中的某個屬性的優先順序的, 可以將被指定的屬性的優先順序提升為最高
- 示例程式碼
<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只能提升被指定的屬性的優先順序, 其它的屬性的優先順序不會被提升
- !important必須寫在屬性值得分號前面
- !important前面的感嘆號不能省略