7.1 狀態偽類
CSS中的偽類 是特殊的關鍵字，添加到選擇器以指示元素的狀態或者其在文檔結構中的位置。它們允許在特定狀態或情況下對元素應用樣式，這些狀態或情況無法通過普通選擇器指定。
主要偽類：
- 狀態偽類
- 結構狀態偽類
- 表單偽類
- 導航偽類
語法：
選擇器:偽類 {
屬性: 值;
屬性: 值;
}
狀態偽類
這些偽類用於根據元素的當前狀態進行樣式設計，例如當滑鼠懸停或元素被激活時：
:hover— 當用戶將滑鼠懸停在元素上時應用:active— 當元素被激活時應用（通常在點擊時）:focus— 當元素獲得焦點時應用（例如使用鍵盤時）:visited— 應用於已訪問的連結:link— 應用於未訪問的連結
7.2 偽類 hover
偽類 :hover 應用於當使用者將滑鼠指標移至元素上時。這通常用於在懸停時更改連結和按鈕的外觀。
語法：
選擇器:hover {
屬性: 值;
屬性: 值;
}
範例：
這個選擇器會改變文本的顏色並在滑鼠懸停時連結加上下劃線。
HTML
<a href="#">假連結</a>
CSS
a:hover {
color: red;
text-decoration: underline;
}
應用：
- 透過視覺反饋增強用戶介面(UI)
- 用於按鈕、連結和其他互動元素
7.3 偽類 focus
偽類 :focus 被應用於當元素獲得焦點。例如，當被點擊或者透過Tab鍵轉到它時。通常用於輸入框和其他表單元素。
語法：
選擇器:focus {
屬性: 值;
屬性: 值;
}
範例：
這個選擇器改變了輸入框的邊框顏色並在獲得焦點時去掉了描邊。
HTML
<input type="text" name="text" id="text">
CSS
input:focus {
border-color: blue;
outline: none;
}
應用：
- 增強網頁的可達性
- 使互動元素在獲得焦點時更醒目
7.4 偽類 nth-child
偽類 :nth-child 被應用於根據它們在父元素中位置的元素。它接受一個參數，可以是數字、關鍵字或表達式。
語法：
選擇器:nth-child(n) {
屬性: 值;
屬性: 值;
}
範例：
這個選擇器允許根據它們在兄弟姐妹中的位置來應用樣式。
HTML
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
CSS
/* 應用樣式到所有奇數子元素 */
li:nth-child(odd) {
background-color: lightgray;
}
/* 應用樣式到所有偶數子元素 */
li:nth-child(even) {
background-color: lightblue;
}
/* 應用樣式到第二個子元素 */
li:nth-child(2) {
color: red;
}
應用：
- 樣式化表格行、列表元素和其他重複性結構
- 允許在不添加額外類別的情況下創建複雜的佈局和樣式
7.5 偽類的使用範例
HTML
<button type="button">Button</button>
CSS
button:hover, button:focus {
background-color: darkblue;
color: white;
}
樣式化偶數表格行：
HTML
<table>
<tr>
<th>名稱</th>
<th>數量</th>
<th>價格</th>
</tr>
<tr>
<td>商品 1</td>
<td>5</td>
<td>10元</td>
</tr>
<tr>
<td>商品 2</td>
<td>3</td>
<td>15元</td>
</tr>
<tr>
<td>商品 3</td>
<td>8</td>
<td>7元</td>
</tr>
</table>
CSS
tr:nth-child(even) {
background-color: #f2f2f2;
}
將某些元素排除於共用樣式之外：
HTML
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
CSS
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION