元素選擇器 ( 標籤選擇器 )

元素選擇器也可以稱作標籤選擇器，是最常見也最簡單的 CSS 選擇器，只要知道了 HTML 元素的標籤名稱，就能夠選取這個元素，並替這個元素套用樣式，這篇教學會介紹元素選擇器、通用選擇器以及一些使用時的注意事項。

快速導覽：

• 通用選擇器
• 元素選擇器 ( 標籤選擇器 )
• 支援自訂元素、不區分大小寫
• 元素選擇器的注意事項

通用選擇器

「通用選擇器」也稱作「萬用字元選擇器」，使用一個星號「*」表示，使用後會選取「所有的元素」，以下方的 CSS 為例，使用通用選擇器後，所有的文字都會變成紅色。

雖然通用選擇器很方便，但使用時的權重為「0-0-0」，所以通常作為 CSS 初始化相關功能使用。

* {color: red;}

通用選擇器也可以搭配 id、class 或屬性，但使用後的效果與單純使用 id、class 或屬性相同，因此也比較少人這麼使用。

*#steam {color: red; }
*.oxxo {color: red; }
*[hello] {color: red; }

/* 效果等同於 */

#steam {color: red; }
.oxxo {color: red; }
[hello] {color: red; }

元素選擇器 ( 標籤選擇器 )

元素選擇器也可以稱作標籤選擇器，泛指 HTML 裡所有的元素，只要「不是網頁資訊元素」，基本上都能透過元素選擇器設定樣式 ( 因為網頁資訊元素屬於不會顯示的元素 )。

更多參考：「HTML 標籤與架構、HTML 元素顯示類型

以下方的 CSS 為例，透過不同的元素選擇器，就能讓不同的元素顯示不同的文字顏色。

<!-- HTML 程式碼 -->
<h1>OXXO.STUDIO</h1>
<h2>STEAM 教育學習網</h2>
<p>hello world!!!</p>

<!-- CSS 程式碼 -->
<style>
  h1 {color: red;}
  h2 {color: blue;}
  p {color: green;}
</style>

支援自訂元素、不區分大小寫

在現代瀏覽器普遍都支援「自訂元素」的情況下，元素選擇器也支援「自訂元素」，不過仍建議使用標準元素，如此對於 SEO 才有比較正面的效果 ( 搜尋引擎才知道這個元素的意義是什麼 )，下方的 CSS 會將 <oxxo> 元素裡的文字變成紅色。

oxxo {color: red;}

此外，因為 HTML 的元素本身就「不區分英文大小寫」，因此元素選擇器也具有「不區分英文字母大小寫」的特性，如果將 h1 寫成 H1，也是可以順利選取元素。

h1 {color: red;}

/* 效果等同於 */

H1 {color: red;}

元素選擇器的注意事項

元素選擇器雖然很簡單，但使用時需要注意「不能重複連接」使用，通常使用 id 或 Class 選擇器時，有時可以透過「重複連接」的方式「增加權重」，但因為元素選擇器有支援自訂元素的特性，當把元素標籤連接在一起時，會變成一個全新的標籤名稱，所以這種做法不能用於元素選擇器。

以下方的 CSS 為例，可以重複使用三個 .apple Class 選擇器讓權重變成 0-3-0，文字呈現紅色，但如果是連續三個 h1，反而會去選取名為「h1h1h1」的標籤，造成找不到元素的狀況，最後 h1 還是呈現黑色。

<!-- HTML 程式碼 -->
<h1>OXXO.STUDIO</h1>
<h2 class="apple">Hello World!!</h2>

<!-- CSS 程式碼 -->
<style>
  .apple.apple.apple {color: red;}
  h1h1h1 {color: red;}
</style>

小結

元素選擇器是最常使用的選擇器，幾乎所有的 CSS 樣式表都會出現這種選擇器，而通用選擇器雖然權重最低，但卻時常作為 CSS 初始化使用，可以很快速的將固定的樣式套用到所有元素，是很方便的選擇器喔。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～