CSS 選擇器
# CSS Selector 選擇器簡介
CSS Selector（選擇器）是用來指定 HTML 元素的語法。CSS 會先透過選擇器找到要設計的元素，再套用樣式。
基本語法如下：
```css
選擇器 {
屬性: 值;
}
```
例如：
```css
p {
color: blue;
}
```
這段 CSS 會將所有 `<p>` 段落文字設定為藍色。
---
## 一、標籤名稱選擇器
使用 HTML 標籤名稱作為選擇器，可以套用樣式到所有相同標籤的元素。
```css
h1 {
color: darkblue;
}
p {
line-height: 1.8;
}
```
上述設定會影響：
- 所有 `<h1>` 標題
- 所有 `<p>` 段落
HTML 範例：
```html
<h1>文章標題</h1>
<p>這是一段文章內容。</p>
```
---
## 二、class 類別選擇器
class 選擇器使用英文句點 `.` 開頭，後面接 class 名稱。
```css
.title {
color: darkgreen;
}
```
HTML 中使用 `class` 屬性：
```html
<h1 class="title">文章標題</h1>
```
同一個 class 可以套用在多個元素上：
```html
<h2 class="keyword">HTML</h2>
<p class="keyword">CSS 是網頁設計的重要工具。</p>
```
```css
.keyword {
color: orange;
font-weight: bold;
}
```
---
## 三、id 選擇器
id 選擇器使用井字號 `#` 開頭，後面接 id 名稱。
```css
#main-title {
color: purple;
}
```
HTML 中使用 `id` 屬性：
```html
<h1 id="main-title">CSS Selector 教學</h1>
```
通常一個頁面中的 id 應該是唯一的，適合指定某一個特定元素。
---
# 完整範例：文章版面設計
以下範例使用 `<style>` 標籤，結合標籤名稱、class 和 id 選擇器，設計一篇簡單的文章版面。
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selector 教學</title>
<style>
/* 標籤名稱選擇器 */
body {
margin: 0;
background-color: #f2f4f7;
font-family: "Noto Sans TC", Arial, sans-serif;
color: #333;
}
article {
width: 80%;
max-width: 800px;
margin: 40px auto;
padding: 35px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
p {
font-size: 18px;
line-height: 1.9;
}
/* id 選擇器 */
#main-title {
margin-bottom: 10px;
color: #1d3557;
text-align: center;
font-size: 36px;
}
#introduction {
color: #666;
text-align: center;
font-size: 16px;
}
/* class 選擇器 */
.section-title {
margin-top: 30px;
padding-left: 12px;
border-left: 5px solid #457b9d;
color: #457b9d;
font-size: 24px;
}
.keyword {
display: inline-block;
margin: 4px;
padding: 6px 12px;
border-radius: 20px;
background-color: #e9f5db;
color: #386641;
font-weight: bold;
}
.highlight {
padding: 2px 6px;
background-color: #fff3b0;
color: #9c6644;
font-weight: bold;
}
.author {
color: #888;
text-align: right;
font-size: 14px;
}
footer {
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid #ddd;
color: #888;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<article>
<h1 id="main-title">認識 CSS Selector 選擇器</h1>
<p id="introduction">
CSS 選擇器可以幫助我們指定 HTML 元素，並套用不同的網頁樣式。
</p>
<p class="author">作者：網頁設計學習者</p>
<h2 class="section-title">什麼是 CSS Selector？</h2>
<p>
CSS Selector 是用來選取 HTML 元素的工具。
我們可以使用標籤名稱、<span class="highlight">class</span> 或
<span class="highlight">id</span> 來指定元素。
</p>
<h2 class="section-title">常見的選擇器</h2>
<p>
標籤名稱選擇器可以選取所有相同的 HTML 標籤；
class 選擇器可以套用在多個元素上；
id 選擇器則通常用來指定單一元素。
</p>
<h2 class="section-title">文章關鍵字</h2>
<p>
<span class="keyword">CSS</span>
<span class="keyword">Selector</span>
<span class="keyword">HTML</span>
<span class="keyword">class</span>
<span class="keyword">id</span>
</p>
<footer>
本文章使用 CSS Selector 進行版面設計
</footer>
</article>
</body>
</html>
```
---
## 選擇器對照表
| 選擇器類型 | CSS 寫法 | HTML 寫法 | 用途 |
|---|---|---|---|
| 標籤名稱選擇器 | `p` | `<p>` | 選取所有相同標籤 |
| class 選擇器 | `.keyword` | `class="keyword"` | 套用到多個元素 |
| id 選擇器 | `#main-title` | `id="main-title"` | 指定單一特定元素 |
## 重點整理
1. 標籤名稱選擇器不需要特殊符號，例如 `p`、`h1`。
2. class 選擇器前面要加句點，例如 `.title`。
3. id 選擇器前面要加井字號，例如 `#header`。
4. class 可以重複使用，id 通常應該保持唯一。
5. `<style>` 標籤通常放在 HTML 文件的 `<head>` 區域中。
相關學習地圖、教學課程
F2E 網站前端工程