CSS 選擇器(2)- * 與類型選擇器

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

CSS選擇器(1)這一篇裏面,討論了類別選擇器,現在讀者已經有了ID與類別選擇器的概念了,這一篇很快的討論其它兩種簡單的選擇器。

為了示範說明,文章下方左半部8個用以呈現範例效果的方塊中,左邊以 div 標籤實作,右邊則是以 section 標籤實作,在右半部功能按鈕中,最右下方有一個 section ,按下這個按鈕,所有 section 標籤實作方塊會呈現反白,這套用了類型選擇器,當你想要將特定類型的元素套用至指定的樣式,只要指定此類型的標籤名稱即可,例如這裏的 section ,當然你也可以指定任何一種標籤名稱,例如 div 、span 等等。

另外要說明的是萬用選擇器,以星號(*)標示,它表示整個網頁的所有內容,在下面的畫面中,右下方有一個黑色背景的 * 按鈕,按一下會將整個網頁反白,一旦你按了之後,請重新載入網頁以灰復正常外觀。

P.S. 此範例IE不支援,請改用 Chorme 或是 Firefox

<div>
id="div_a"
class="cls_a"
<div>
id="div_b"
class="cls_b"
<div>
id="div_c"
class="cls_b"
<div>
id="div_d"
class="cls_c"
<section>
id="div_e"class="cls_c"
<section>
id="div_f" class="cls_b"
<section>
id="div_g" class="cls_a"
<section>
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
  • *
  • section



沒有留言: