什麼是CSS偽級以及如何使用它們？

CSS偽類是用於定義元素特殊狀態的關鍵字，可基於用戶交互或文檔位置動態應用樣式；1. :hover在鼠標懸停時觸發，如button:hover改變按鈕顏色；2. :focus在元素獲得焦點時生效，提升表單可訪問性；3. :nth-child()按位置選擇元素，支持odd、even或公式如2n 1；4. :first-child和:last-child分別選中首個和最後一個子元素；5. :not()排除匹配指定條件的元素；6. :visited和:link根據鏈接訪問狀態設置樣式，但:visited受隱私限制；偽類以冒號開頭，可鍊式使用如a:hover:focus，且需遵循LVHA順序以確保正確層疊，它們無需HTML定義，由瀏覽器自動應用，能減少JavaScript依賴並增強交互性與可訪問性。

CSS pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). They allow you to style elements based on user interaction, element position in the document, or other conditions that aren't reflected in the HTML structure itself.

Unlike regular classes, pseudo-classes don't need to be defined in the HTML — they're applied automatically by the browser when certain conditions are met.

Common Use Cases and Examples

Pseudo-classes are especially useful for enhancing user experience through dynamic styling without JavaScript.

:hover – Style on Mouse Over

One of the most widely used pseudo-classes. It applies styles when the user hovers over an element.

 button:hover {
  background-color: blue;
  color: white;
}

This makes buttons change color when the mouse pointer is over them.

:focus – Style When Element is Focused

Useful for accessibility and form interactions. It targets elements that receive focus, like inputs or links.

 input:focus {
  border-color: green;
  outline: 2px solid yellow;
}

This helps users see which input field is currently active.

:nth-child() – Target Elements by Position

Select elements based on their position in a parent container.

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

This styles every odd list item with a light gray background. You can also use formulas like 2n 1 for more control.

Other variations:

• :nth-child(even) – even positions
• :nth-child(3) – third child
• :nth-child(3n) – every third child

:first-child and :last-child

Target the first or last element among siblings.

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

p:last-child {
  color: gray;
}

:not() – Exclude Elements Matching a Condition

Negation pseudo-class. Applies styles to elements that don't match the given selector.

 div:not(.special) {
  opacity: 0.8;
}

This reduces opacity of all div s except those with the class special .

:visited and :link – Style Links Based on History

Style anchor tags depending on whether they've been visited:

 a:link {
  color: blue;
}

a:visited {
  color: purple;
}

Note: For privacy reasons, the styles allowed on :visited are limited (eg, you can't change display or position ).

How to Use Pseudo-Classes

The syntax is simple:

 selector:pseudo-class {
  property: value;
}

You can also chain pseudo-classes:

 a:hover:focus {
  text-decoration: underline;
}

This applies only when the link is both hovered and focused.

Key Points to Remember

• Pseudo-classes start with a colon ( : ).
• They're dynamic — applied based on user behavior or document state.
• Some pseudo-classes like :hover only work with interactive elements unless tabindex is added.
• Order matters in some cases. For links, follow the LVHA rule:
  :link , :visited , :hover , :active — to ensure correct cascade.

Final Thoughts

Pseudo-classes are powerful tools for creating responsive, interactive designs with pure CSS. They reduce the need for JavaScript in many common UI patterns and improve accessibility when used thoughtfully.

Basically, they let you answer questions like:

• Is the user hovering this button?
• Is this the first item in a list?
• Has this link been visited?

Once you understand how they work, you'll find yourself using them in almost every project.

以上是什麼是CSS偽級以及如何使用它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！