選擇器特性
範圍 scope
精準度決定影響範圍
<style>
div {
color: red;
}
</style>
<div>一號</div>
<span>二號</span>
<span>
<div>三號</div>
</span>
一號
符合 div
選擇器,顯示為紅色
二號
不符合 div
選擇器,顯示為黑色
三號
符合 div
選擇器,顯示為紅色
雖然三號的
div
在span
內,但此選擇器嚴謹度為:只要是div
就可以
繼承 inherit
子層有條件的繼承父層屬性
<style>
span {
color: blue;
}
</style>
<div>一號</div>
<span>二號</span>
<span>
<div>三號</div>
</span>
一號
不符合 span
選擇器,顯示為黑色
二號
符合 span
選擇器,顯示為藍色
三號
不符合 span
選擇器,但是上層符合 span
選擇器,屬性繼承後顯示為藍色
複寫 overwrite
越接近目標,優先權越高
HTML 屬性 > HTML 元素 > CSS 檔案
<style>
div {
color: red;
background: #000000;
}
</style>
<div>一號</div>
<div style="color: yellow;">二號</div>
由上往下複寫
後面宣告屬性會覆寫前面宣告屬性
<style>
div {
color: red;
}
div {
color: yellow;
}
</style>
<div>一號</div>
權重 priority
遇到同樣精準度屬性時,採用複寫機制處理
!important
> HTML 屬性
> ID 選擇器
> Class 選擇器 | 偽類 | 屬性選擇器
> 元素 (Element)
> 全域 (*)
<style>
div {
color: red !important;
}
div {
color: yellow;
}
span > div {
color: blue;
}
</style>
<div>一號</div>
<span>
<div>二號</div>
</span>
依據複寫機制,理論上 一號
要呈現黃色,但在 !important
的干涉下,後面的宣告無法複寫(權重)
<style>
div#sp {
color: green;
}
div {
color: yellow;
}
span > div {
color: blue;
}
div {
color: red;
}
</style>
<div>一號</div>
<span>
<div>二號</div>
</span>
<span>
<div id="sp">三號</div>
</span>
一號
- 符合
yellow
- 符合
red
- 最終顯示
red
二號
- 符合
yellow
- 符合
blue
- 符合
red
因red
精準度較低,複寫失敗 - 最後顯示
blue
三號
- 符合
green
- 符合
yellow
因yellow
權重較低 (ID
>Element
),複寫失敗 - 符合
blue
因blue
權重較低 (ID
>Element
),複寫失敗 - 符合
red
因red
權重較低 (ID
>Element
),複寫失敗 - 最後顯示
green
ID 選擇器
使用符號
#
表示,同一個頁面不可以出現重複的 ID 名稱
<style>
#one {
color: #ffffff;
background: #000000;
}
</style>
<div id="one">One</div>
CLASS 選擇器
使用符號
.
表示,同一個頁面可以出現重複的 CLASS 名稱
<style>
.more {
color: #ffffff;
background: #000000;
}
</style>
<div class="more">One</div>
<div class="more">Two</div>