CSS id與 class

本章節裡會說明 CSS 選擇子(Selector) 與id與class 的優先權

CSS 選擇子(Selector) 與id與class:

下方3個例子都可將元素P 內的文字改成顏色!

  1. 在樣式表將選擇子定義樣式 ,例如 (參考範例一): P{ color:red; }
  2. 自定id名稱 ,例如(參考範例二) : #myid1 { color:red; }
  3. 並且需在HTML元素中設定id名稱方式:

    <p id="myidname1">看看文字顏色</p>

  4. 自定class名稱 ,例如(參考範例三) : .myclass1 { color:red; }
  5. 並且需在在HTML元素中設定class名稱方式:

    <p id="myclass1">看看文字顏色</p>

聰明的你是否心理有疑問? id 與 class都可定義樣式屬性為何要分id 與 class ?


範例一: 只設定一次 ,同元素的顏色全改過來了


範例二:指定HTML元素id名稱,只影響該id元素的顏色

注意: 元素裡的id名稱不可重複


範例三:指定HTML元素class名稱,只影響該class元素的顏色

注意: 可在元素裡用同樣的class名稱,不同元素可共用class名稱喔!


CSS id 與 class 的使用影響範圍

說明:

P { color:red;} 在元素選擇子(Seletor)設樣式像是通天教主,相同的元素全部被影響,但優先權是3者裡最低的喔

#myid1 { color:red; } 用id名稱則是唯我獨尊不要跟他取同id名喔

.myclass1 { color:red; } 用class名稱則是不同HTML元素也可共用


優先權

CSS 選擇子 與 id 與 class 同時設定樣式時聽誰的?

不同一HTML元素內,越接近元素的優先權越高 , 行內樣式 > 內部樣式 > 外部樣式

id與class的優先權 > 元素選擇子的指定樣式

同一HTML元素內,寫在後面的的優先權越高