4.1 類型選擇器
在 CSS 中，選擇器用來定義哪些元素會應用樣式。基本選擇器包括類型選擇器、類別選擇器、ID 選擇器和通用選擇器。每種選擇器都有其特點和應用。
類型選擇器 (Type Selectors)
類型選擇器對所有特定類型的元素應用樣式。例如，可以對所有段落 (<p>)，標題 (<h1>, <h2> 等) 或其他 HTML 標籤應用樣式。
tagname {
屬性: 值;
屬性: 值;
}
CSS
p {
color: blue;
font-size: 14px;
}
這個選擇器會對文件中的所有 <p> 元素應用樣式。
特點：
- 適用於所有指定類型的元素
- 適合用於所有特定類型元素的全局樣式
4.2 類別選擇器
類別選擇器 允許將樣式應用於具有特定類別的一個或多個元素。 類別在 HTML 中由 class 屬性定義，並在 CSS 中用點號 (.) 表示。
語法：
.classname {
屬性: 值;
屬性: 值;
}
範例：
CSS
.button {
background-color: green;
color: white;
padding: 10px;
}
這個選擇器會對具有 button 類別的所有元素應用樣式。
特點：
- 可以對多個元素使用相同的類別
- 允許輕鬆地對不同元素應用相同的樣式
4.3 ID 選擇器
ID 選擇器對具有唯一識別碼的元素應用樣式。識別碼在 HTML 中由 id 屬性定義，並在 CSS 中用井號 (#) 表示。
語法：
#uniq-id {
屬性: 值;
屬性: 值;
}
範例：
這個選擇器會對具有識別碼 main 的元素應用樣式。
CSS
/* 選擇具有 ID #main 的元素 */
#main {
width: 800px;
background: yellow;
}
HTML
<div id="main">這個元素會有 800px 寬。</div>
<div>這個元素不會被樣式化。</div>
特點：
- ID 在頁面上必須是唯一的
- 用於樣式化唯一的元素，如標題或主要內容
4.4 群組選擇器
群組選擇器允許對多個元素應用相同的規則。它們減少了代碼量並簡化了樣式管理。
語法：
選擇器, 選擇器, … {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有 h1, h2 和 h3 元素 */
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
HTML
<h1>標題 1</h1>
<h2>標題 2</h2>
<h3>標題 3</h3>
<p>這段文字不會被此規則樣式化。</p>
4.5 通用選擇器
通用選擇器對頁面上的所有元素應用樣式。它們由星號 (*) 表示，可以用來重置樣式或對所有元素應用通用樣式。
語法：
* {
屬性: 值;
屬性: 值;
}
範例：
這個選擇器會對頁面上的所有元素應用樣式，重置其邊距並設置盒模型。
HTML
<div>段落 1</div>
<div>段落 2</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
特點：
- 適用於頁面上的所有元素
- 對全局樣式重置或應用基本樣式於所有元素很有用
GO TO FULL VERSION