Pseudo_classes.md

CSS 偽類(pseudo-classes)可針對元素在特定狀態下套用樣式,常用於設計互動效果、使用者回饋與表單控制。

1. :hover

當滑鼠游標懸停在元素上時觸發。

a:hover {
  color: red;
  text-decoration: underline;
}

2. :active

當元素正在被點擊(按下但未放開)時觸發。

button:active {
  background-color: yellow;
  transform: scale(0.98);
}

3. :focus

當元素獲得焦點(如輸入框被點選)時觸發。

input:focus {
  outline: none;
  border: 2px solid blue;
}

4. :checked

用於表單元素(checkbox 或 radio)被選取時。

input:checked + label {
  font-weight: bold;
  color: green;
}

5. :disabled / :enabled

根據元素是否可互動來設定樣式。

input:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

input:enabled {
  background-color: white;
}

6. :nth-child() / :first-child / :last-child

針對元素在父元素中的相對位置。

li:nth-child(odd) {
  background-color: #f9f9f9;
}

li:first-child {
  font-weight: bold;
}

這些偽類可大幅提升網頁的互動性與可用性,是設計使用者介面時不可或缺的重要工具。

Last updated