前端 101｜什麼是 CSS 選擇器？｜EP 02
更新日期： 2021 年 12 月 14 日
我們可以藉由 scratch 軟體，快速打造一個能完全控制的輕量級網站。
然而，若想要打造、客製並且維護一個以 HTML 語法為基礎的網站。
我們需要具備 HTML、CSS 以及 JavaScript 等語法的專業知識，以及投入大量的時間。
好消息是，現在有許多的方法，讓你能減少客製化網站所需的一大門檻。
舉例來說，你可以使用 CSS 選擇器，達成上述功能。
接下來，我們將仔細介紹什麼是 CSS 選擇器。
此外，我們還會探索不同種類的選擇器，並了解要能如何使用、組裝它們，藉此創造一個好看的網站外觀。
什麼是 CSS 選擇器
CSS 選擇器，是一種用來制定網站元素外觀的 CSS 語法。
在網站設計中，有非常多不同類型的 CSS 選擇器。
它們都有各自語法，並且會告訴瀏覽器，套用哪些 CSS 樣式至指定的網站元素上。
那些被 CSS 選擇器套用的網站元素，被稱為：「選擇器主題」。
那些主題的命名方式，可根據各自的元素類型、class 與 id 語法設定、給定的元素屬性或虛擬狀態，作為判斷依據。
藉由這些不同種類型的選擇器，你不只可以更快速的客製化網站。
同時，你還可以對程式碼維持精細的控制。
下面，我們將講解如何將 CSS 選擇器使用到網站上，並探索其他不同種類的選擇器。
事不宜遲，讓我們開始吧。
如何使用 CSS 選擇器？
CSS 選擇器的使用方式主要有兩主種。
如果你的網頁程式碼，將 HTML 與 CSS 都寫在同一份文件中，那你只需要在網頁的 <head> 區塊，輸入選擇器語法即可。
但是，若你將網頁 HTML、CSS 兩個檔案開撰寫。
你可能會擁有一個取名為「index.html」 的 HTML 檔案，以及一個名為「style.css」的 CSS 檔案。
那麼你必須先將 index.html 此檔案，與 CSS 檔案連繫在一起，才能使瀏覽器順利轉譯網站的視覺介面。
它的程式碼可能會以下面例子呈現：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 選擇器示範網頁</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>這裡是網頁的大標題文字</h1>
</body>
</html>注意「<link rel=”stylesheet” href=”style.css”>」這一行程式碼，它就是連繫 HTML 與 CSS 檔案的關鍵。
現在，我們已經對 CSS 選擇器的運作機制，有了基本的了解。
接下來，我們繼續了解幾個主要的 CSS 選擇器種類。
CSS 選擇器的種類
下方我們將會解釋，四個主要的 CSS 選擇器類型。
每種選擇器都可以幫助你，套用網頁不同的元素群組。
我們會以套用範圍劃分，從能一次套用最多元素的選擇器開始，再逐漸介紹套用範圍較少的選擇器。
下方的示範程式碼，你可以使用 Code Pen 工具輔助。
當你有無法理解的程式碼時，可以將程式碼複製貼上到工具中，查看它實際的呈現方式。
一、全體選擇器（Universal Selector）
這個星號「＊」是 CSS 的全體選擇器。根據預設，它會套用網頁上的所有元素。
此外，此選擇器還可以與「命名空間」（namespaces） 合併使用。
@namespace 是 XML 這種網頁資料格式的語法，主要的用途是分割不同檔案類型的設定樣式。
我們可以把想像成一種貼標籤的設定，讓電腦能順判斷，特定檔案應該套用哪種樣式外觀。
例如，若你想要將 SVG 檔案與 HTML 檔案，這兩個以不同程式語言撰寫的檔案，合併再一起。
你可以使用 @namespace 語法，按照檔案的程式語言，將各自設定的 CSS 外觀樣式做切割。
可以避免日後發生網站樣式，產生互相覆蓋、影響的問題。
全體選擇器語法
舉例來說，若我們希望網頁的所有元素，都可以針對其樣式進行統一的調整。
藉由全體選擇器，我們可以撰寫以下三種語法。
- 套用所有元素的語法：* 或 *|*
* {
color: orange;
}
*|* {
border: 1px solid;
}- 套用 @namespace 該區塊的所有元素：ns|*
ns|* {
color: orange;
}- 套用所有未定義的命名空間元素
|* {
color: orange;
}以下是程式碼的樣式結果：
二、型態選擇器 （Type Selector）
型態選擇器會套用 HTML 中，所有已被規範的標籤語法。
舉例來說，使用 「a」型態選擇器，會將所有 css 設定值，套用所有 <a> 標籤上。
同樣的，使用「span」型態選擇器，也會對所有<span>標籤起到相同作用。
你還可以使用自定義的命名空間，去限制型態選擇器的套用範圍。
型態選擇器語法
假設我們有個網頁檔案包含文字與 span 元素，我希望將 span 元素以橘色畫線標註。
- 程式碼套用如下：
span {
background-color: orange;
}呈現出的畫面為下方表示：
三、類別選擇器（Class Selector）
類別選擇器會套用網頁上，所有已命名的類別群組。
舉例來說，「.header」選擇器會套用所有名為 header 此類別的元素。
同理，「.footer」 選擇器也會套用 footer 類別中的所有元素。
如果你曾使用過開放原始碼的網頁前端框架：Bootstrap，你將會發現該框架的 CSS 樣式，就是採用類別選擇器執行。
你可以在 W3School 中，找到 Bootstrap 的完整 CSS 類別選擇器清單。
類別選擇器語法
舉例來說，我們希望將名為 cake 類別內的所有元素，都套用橘色的樣式。
.cake {
color: orange;
}我們可以發現，同樣使用 <h1> 標籤，只有具有 cake 類別的標題，顏色有發生改變。
ID 選擇器（ID Selector）
ID 選擇器套用範圍，是以具備元素該 ID 屬性作為判斷依據。
舉例來說，「#dog」選擇器會套用具有 dog ID 值的元素。
記得，此選擇器能順利運作的前提，是該選擇器的 ID 名稱，必須完全吻合給定的元素 ID 名稱。
ID 選擇器語法
舉例來說，我想要改變 ID 名稱為「dog」的元素顏色，以及其文字的對齊方式。
#dog {
color: orange;
text-align:center;
}以下為呈現結果：
務必記得，ID 選擇器的名稱，必須要完全吻合元素的命名型態。
就算是英文大小寫型態不同，也將導致選擇器無法順利運作。
屬性選擇器（Attribute Selector）
屬性選擇器套用的範圍，包含所有元素具備屬性設定、屬性值的元素。
例如，若選擇器設定為「a[href]」，將套用到所有的連結。
但若設定成「a[href*=”dog”]」，則會套用至含有「dog」字串的連結設定。
你可以使用屬性選擇器，將已給定屬性值的元素，套用自己設定好的樣式。
因此，若我希望將含有「hubspot」文字的連結，套用上特定的 CSS 外觀，則可以適用「a[href=”hubspot”]」此語法。
此外，你也可以使用自定義的命名空間，限制屬性選擇器的套用範圍。
屬性選擇器語法
舉例來說，我想要使連結中含有「dog」字串的連結，連結的顏色產生改變，就能使用以下語法：
a[href*=”dog”] {
color:orange;
}以下為呈現結果：
除了上述語法外，還能針對不同的命名方式，產生樣式上的變化。
以下為其他屬性選擇器的內容：
- [屬性] { 樣式屬性 }
- [屬性=值] { 樣式屬性 }
- [屬性~=value] { 樣式屬性 }
- [屬性|=value] { 樣式屬性 }
- [屬性^=value] { 樣式屬性 }
- [屬性$=value] { 樣式屬性 }
- [屬性*=value] { 樣式屬性 }
虛擬類別選擇器（Pseudo-class Selector）
虛擬類別選擇器，將使元素在特別的狀態下，套用其他不同的樣式。
例如，「:hover」選擇器會使游標停留在元素上時，產生特別的樣式。
其他常見的例子還包含：「:active」、 「:visited」、 「:invalid」。
虛擬類別選擇器的語法
舉例來說，若我希望使用者點擊過的連結，能夠變成綠色的樣式，其他未點擊的連結則呈現藍色。
此外，我還希望當使用者將游標移至連結上方時，會產生引人注目的紅色虛擬樣式。
我將會使用到以下語法：
a:link {
color: #0000FF;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}以下為呈現結果
現在，我們已經了解幾個主要的 CSS 選擇器，接下來我們繼續討論，要如何結合上述內容，套用到自己的網站上。
我該如何在 CSS 中，組合多種選擇器？
假設你有多個網站元素，需要套用至相同的 CSS 樣式。
例如，希望 h2 與 .page 類別希望能變成綠色的外觀。
你可以用兩種方式撰寫完成。第一種分別撰寫各自的 CSS 語法，如下方所示：
h2 {
color: green;
}
.page {
color: green;
}或者，你可以將兩個選擇器結合至選擇器列表（selector list）
若想創造選擇器列表，你只需要將多個選擇器，寫在同一行程式碼，並使用逗號分隔開來，在同一組括號內撰寫樣式。
此語法的寫法如下：
選擇器1, 選擇器2, 選擇器3 { 設定樣式 }
以下是實際範例：
h2, .page {
color: green;
}此外，你也可以將單一選擇器以不同行數區隔開來，使程式碼的可讀性變高。
以下是實際範例：
h2,
.page {
color: green;
}將不同的選擇器，套用以上的方法結合再一起，可以幫助你降低 css 檔案的大小，並提高網站載入速度。
結語：透過 CSS 選擇器打造客製化網站
當你透過 scratch 建造的網站時， CSS 選擇器能確保網站客製化外觀的過程，對程式碼與樣式保持精準的控制。
雖說 CSS 可能會有一條較陡的學習取現，但你應該花時間投入學習，並測試不同樣式的 CSS 選擇器。
如此一來，它可讓你根據自己的品牌，打造合適的外觀，同時保持程式碼的簡潔，並增加網站仔入速度。