選擇器特性

範圍 scope

精準度決定影響範圍

<style>
    div {
        color: red;
    }
</style>

<div>一號</div>

<span>二號</span>

<span>
    <div>三號</div>
</span>

一號 符合 div 選擇器,顯示為紅色

二號 不符合 div 選擇器,顯示為黑色

三號 符合 div 選擇器,顯示為紅色

雖然三號的 divspan 內,但此選擇器嚴謹度為:只要是 div 就可以

demo

繼承 inherit

子層有條件的繼承父層屬性

property-defs

<style>
    span {
        color: blue;
    }
</style>

<div>一號</div>

<span>二號</span>

<span>
    <div>三號</div>
</span>

一號 不符合 span 選擇器,顯示為黑色

二號 符合 span 選擇器,顯示為藍色

三號 不符合 span 選擇器,但是上層符合 span 選擇器,屬性繼承後顯示為藍色

demo

複寫 overwrite

越接近目標,優先權越高

HTML 屬性 > HTML 元素 > CSS 檔案

CSS 宣告位置

<style>
    div {
        color: red;
        background: #000000;
    }
</style>

<div>一號</div>
<div style="color: yellow;">二號</div>

demo

由上往下複寫

後面宣告屬性會覆寫前面宣告屬性

<style>
    div {
        color: red;
    }

    div {
        color: yellow;
    }
</style>

<div>一號</div>

demo

權重 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 的干涉下,後面的宣告無法複寫(權重)

demo

<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>

一號

  1. 符合 yellow
  2. 符合 red
  3. 最終顯示 red

二號

  1. 符合 yellow
  2. 符合 blue
  3. 符合 redred 精準度較低,複寫失敗
  4. 最後顯示 blue

三號

  1. 符合 green
  2. 符合 yellowyellow 權重較低 (ID > Element),複寫失敗
  3. 符合 blueblue 權重較低 (ID > Element),複寫失敗
  4. 符合 redred 權重較低 (ID > Element),複寫失敗
  5. 最後顯示 green

demo

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>