檢查選取器
CSS 選取器可用來選取要套用樣式的元素。 選取器提供大量的彈性和能力。 選取器可讓您將樣式套用至所有元素或一個特定元素，甚至是一個特定字母。
選取器有三種核心類型:
- 元素
- 類別
- 識別碼
您可以使用這些選取器，將樣式套用至許多元素或幾個元素。
元素選擇器
元素選取器會套用至具有該標籤的所有元素。 任何 HTML 元素都可以當做元素選取器使用。 使用 h1 可讓您修改頁面上的所有 h1 元素。
h1 {
/* style */
}
類選擇器
所有 HTML 元素都可讓您新增 class 屬性。
class 可用來將元素分組在一起，並讓您標記它們以套用 CSS 設定。
創建簡歷時，您有教育和工作經歷部分。 使用類別可讓您使用相同的樣式來格式化那些元素。
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
在上一個範例中，您可能會希望每個 div 的格式設定都與它們顯示類似的資訊類型相同。 藉由將兩個 div 元素標示為相同的類別，您可以將相同的 CSS 樣式套用至每個元素。
若要在 CSS 中識別類別，請在名稱前面加上 . 前置詞。 在我們的範例中，您會使用 .history。
.history {
/* your styles */
}
如果使用 CSS 檔案，您會在 CSS 檔案中撰寫類別樣式定義。 HTML 中的類別屬性會參考 CSS 檔案中的定義。
虛擬類別
虛擬類別可讓您根據元素在頁面上的位置或使用者與其互動的方式來識別元素。
當使用者與網頁交互時，各種元素的狀態會發生變化。 使用者可以將滑鼠停留在項目上，而您希望在他們滑鼠暫留時，色彩會變更。 或者，如果使用者選擇了連結。 在他們存取該連結後，您可以通過更改樣式來通知他們。 CSS 支援許多 虛擬類別，這些類別會根據使用者執行或完成的工作動態套用。 虛擬類別前面會加上 : 前置詞，並置於另一個選取器之後。
例如，當使用者將游標停留在連結上方時，若要將連結的背景色彩設定為黃色，您可以使用下列 CSS:
a:hover {
background-color: yellow;
}
下表列出一些最常見的虛擬類別:
| 虛擬類別 | 描述 |
|---|---|
hover |
使用者將游標停留在項目上 |
visited |
之前按兩下的連結 |
link |
未檢視的連結 |
first-child |
第一個符合階層中選取器的子系 |
last-child |
最後一個符合階層中選取器的子系 |
重要
使用虛擬元素和 CSS，您可以從超連結中移除底線。 一般規則是最好保留底線以供協助工具使用。 底線文字可讓使用者快速識別頁面上的連結。
ID 選擇器
類似于類別，識別碼可讓您將樣式套用至元素。 但是，雖然類別可以套用至多個元素，但識別碼必須是唯一的，而且僅指涉一個項目。
繼續時，您可能會有社交媒體的區段，例如 X、GitHub 或您的部落格。 如果您想要該區段具有自訂樣式，您可以設定識別碼:
<div id="social-media">
<!-- list of links -->
</div>
CSS 中的識別碼前面具有 # 前置詞:
#social-media {
/* style */
}
注意
類別和識別碼的標準命名慣例是使用「扭曲大小寫」。每個字都是小寫，並以 - 分隔。 扭曲大小寫之名來自字組彷彿位於串籤上那樣的顯示方式。