2025 iThome 鐵人賽

DAY 18

Modern Web

前端迷走中：從零開始的新手之路系列第 18 篇

[Day 18] 選擇不障礙，讓CSS幫你──元素、類別、ID 與通用選擇器

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-10-02 23:45:11

36 瀏覽

分享至

昨天我們提到在HTML中使用CSS的三種方式，包括外部樣式表、內部樣式表，以及行內樣式。

也提到定義樣式的規則由選擇器與宣告所構成。選擇器指定樣式適用於哪些內容。宣告則設定要套用的樣式。

由於在設定樣式之前，勢必要先指定這些樣式適用於哪些內容。因此，需要先好好認識CSS的選擇器。

今天我們先介紹基本的選擇器。包括元素選擇器、類別選擇器、ID選擇器，還有通用選擇器。

基本的選擇器

元素選擇器

如果要將樣式套用在HTML元素上，最直覺的一種方式就是依據元素種類去挑選內容。

在CSS中，這種依據元素種類挑選內容的選擇器稱作類型選擇器（Type Selector），也稱作元素選擇器（Element Selector）。

使用元素選擇器時，直接寫出元素名稱就好了，就像是範例中的h1：

h1 {
  font-weight: 600;
}

類別選擇器

雖然元素選擇器使用上很直覺，但有時候可能不是同一種元素的所有內容都想要設定成同一種樣式。

也有可能，想要設定同一種樣式的內容，分別以不同種類的元素來表示。

這時候，我們可以對這些內容的元素添加class屬性。如此一來，就可以不受元素種類限制，將內容分成不同類別，接著再分批設定不同的樣式。

這種依據class的屬性值挑選內容的選擇器，稱作類別選擇器（Class Selectors）。

使用類別選擇器時，class的屬性值需要以點.開頭，像是範例中的.keyword：

.keyword {
  font-weight: bold;
}

ID選擇器

雖然透過類別選擇器，可以不受元素種類限制，將內容分成不同類別以設定樣式。不過有時候可能也會想對同一種類別的內容，做進一步的劃分。

或是有時候，也可能只想將樣式套用在網頁中的某個內容，不希望其他內容套用了同一種樣式。

這時候，就可以對元素添加id屬性。我們之前有提過，每個元素只能有一個id屬性值，而且每個元素的id屬性值不能跟其他元素的重複。

這種依據獨一無二的id屬性值挑選內容的選擇器，就稱作ID選擇器（ID Selectors）。

使用ID選擇器時，id的屬性值需要以井字號#開頭，像是範例中的#time：

#mostimportant {
  background-color: yellowgreen;
}

通用選擇器

除了透過元素選擇器、類別選擇器或ID選擇器，限定想要套用樣式的內容，CSS還有一種通用選擇器Universal Selector，可以讓我們對網頁中的所有元素都套用同一種樣式。

使用通用選擇器，只需要寫出星號*就好，如同以下範例：

* {
  font-family: "Noto Sans TC", sans-serif;
}

通用選擇器的一種用途是重設樣式表，覆蓋瀏覽器預設的樣式。另一種用途，則是在使用其他選擇器時加上通用選擇器，讓程式碼變得更好閱讀。[1]

像是article :first-child跟article:first-child雖然只差一個空格，但兩個選擇器的意思完全不同。這時候就可以在第一個選擇器的空格與冒號之間加上*，變成article *:first-child，以幫助理解。
（關於:first-child是什麼選擇器，我們之後會再介紹，這裡就先帶過～）

範例

接下來，實際來練習看看，這些選擇器要怎麼用吧。

以下是網頁內容的HTML程式碼。

<body>
  <article>
    <h1>[Day 16] 暫別 HTML──引文、程式碼與通用容器</h1>
    <p id="datePublished">2025/9/30</p>
    <p class="content">
      前幾天提到怎麼在網頁中加入<span class="keyword yesterday">連結</span
      >、<span class="keyword yesterday">清單</span>、<span
        class="keyword yesterday"
        >表格</span
      >跟<span class="keyword yesterday">圖片</span>。
    </p>
    <p class="content">
      掌握這些常見內容的使用方法後，我們差不多可以往<span id="mostimportant"
        >CSS</span
      >邁進了。
    </p>
    <p class="content">
      不過在此之前，我想再補充怎麼加入<span class="keyword today">引文</span
      >、<span class="keyword today">程式碼</span>這兩種內容。
    </p>
    <p class="content">
      因為寫文章的時候免不了會需要引用資料，或參考前人的見解。<br />如果是技術類的文章，則常常會需要放上程式碼。
    </p>
    <p class="content">
      接著，會再介紹很常會看到的<span class="keyword today">&lt;span&gt;</span
      >跟<span class="keyword today">&lt;div&gt;</span
      >這兩個元素，還有他們的使用時機。
    </p>
    <p>...</p>
  </article>
  <footer>
    <p class="keyword">
      Tags:
      <span>引文</span>、<span>程式碼</span>、<span>&lt;span&gt;</span>、<span
        >&lt;div&gt;</span
      >
    </p>
  </footer>
</body>

在還沒有套用樣式前，網頁長這個樣子。
接著我們開始加點樣式～

以通用選擇器添加樣式後

一開始，我們先在<style>元素裡添加以下程式碼。使用通用選擇器將整個網頁的字體另外設定為"Noto Sans TC", sans-serif，覆蓋瀏覽器的預設字體。

* {
  font-family: "Noto Sans TC", sans-serif;
}

仔細看的話可以發現，整個網頁的字體都變了。

以元素選擇器添加樣式後

接著，我們添加以下程式碼，分別對h1跟p元素設定樣式。

h1 {
  font-weight: 600;
}

p {
  font-weight: 300;
}

h1元素的字重設為600，因此標體變粗了點；
p元素的字重設為300，因此內文的字體變細了點。

以類別選擇器添加樣式後

文章的跟關鍵字都以<p>元素添加網頁中。為了區別兩者，將正文的class屬性設為content，關鍵字的設定為keyword。

另外又將文中的關鍵字，分成昨天與今天的主題，以<span>包起來並分別將class屬性設為yesterday跟today。

接著分別對content、keyword、yesterday跟today類別設定以下樣式：

.content {
  font-size: 20px;
}

.keyword {
  font-weight: bold;
}

.yesterday {
  color: Olive;
}

.today {
  color: DarkCyan;
}

content類別將字體大小設為20px，於是正文的字體變大；
keyword類別將字體設為粗體，於是文內的關鍵字以及底下的標籤都變粗；
yesterday類別將文字顏色設為Olive，於是昨天提到的關鍵字變成橄欖色；
today類別將文字顏色設為DarkCyan，於是今天提到的關鍵字變成暗青色。

以ID選擇器添加樣式後

為了區分文章內容，文章重點的CSS另外以<span>包起來，將id屬性設為mostimportant；發佈時間的id屬性則設為datePublished。

#mostimportant {
  background-color: yellowgreen;
}

#datePublished {
  opacity: 0.6;
} */

ID為mostimportant的CSS，背景顏色設為yellowgreen，於是CSS以黃綠色標記。
ID為datePublished的發佈時間，不透明度設為0.6，於是顏色比起文章的其他內容還來得淡。

注意事項

避免混用大小寫

CSS的選擇器沒有特別區分元素名稱、屬性名稱以及屬性值的大小寫，而是依據文件使用哪一種標記語言而定：[2]

All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors.
The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language.
For example, in HTML, element names are case-insensitive, but in XML, they are case-sensitive. Case sensitivity of namespace prefixes is defined in [CSS3NAMESPACE].

由於HTML區分class與id屬性值的大小寫，使用CSS的類別選擇器跟ID選擇器時，就要特別注意大小寫是否正確，或是乾脆都用小寫。[3]

至於元素名稱跟屬性名稱，雖然HTML沒有區分大小寫，所以使用CSS的選擇器時也沒有區分，但還是建議都使用小寫，這樣才能維持一致性。

數字與其他符號

在CSS中，元素名稱、類別與id被稱作identifiers，只能由以下字元組成：[4]

A-Z與a-z範圍內的ASCII字元
十進制數字
連字符-
底線_
其他大於等於U+00A0的Unicode字元
跳脫字元

雖然在HTML中，class與id的屬性值可以用數字開頭，不過在CSS中禁止以數字開頭，或是以後面跟著數字的連字號開頭。除非使用跳脫字元轉義。

以下由[MDN]提供的例子，便因為class屬性值裡面包含?，或是以數字開頭，會導致錯誤：

.item?one {
  background-color: green;
}

.123item {
  background-color: green;
}

除非以跳脫字元改成這樣：[5]

/* In the next two rules, the class attributes must be escaped */

.item\?one {
  background-color: pink;
}

.\00003123item {
  background-color: yellow;
}