CSS 選擇器(1)- ID & 類別選擇器

康廷數位: CSS 選擇器(序)

序這一篇裏面,討論了ID選擇器,透過 #ID 格式的字串,CSS 可以據以取出特定的元素,如果元素是一個以上的話,可以透過類別選擇器,如下:

id="div_a"
class="cls_a"
id="div_b"
class="cls_b"
id="div_c"
class="cls_b"
id="div_d"
class="cls_c"
id="div_e"
class="cls_c"
id="div_f"
class="cls_b"
id="div_g"
class="cls_a"
id="div_h"
class="cls_d"
  • #div_a
  • #div_b
  • #div_c
  • #div_d
  • #div_e
  • #div_f
  • #div_g
  • #div_h
  • .cls_a
  • .cls_b
  • .cls_c

針對相關類型的元素,設定相同的 class 屬性,然後以 . 為字首,連結 class 屬性名稱,例如 .cls_a ,如此一來,相同 class 屬性名稱的元素,都會套用指定的樣式,此為類別選擇器,請自行點選右邊畫面上任一個灰色方塊以檢視畫面左邊的效果。

P.S. 此範例調用 querySelector() 與 querySelectorAll() 等 HTML5 導入的功能函式,IE不支援,請改用 Chorme 或是 Firefox

康廷數位: CSS 選擇器(序)

沒有留言: