【揭秘CSS偽類選擇器】輕鬆掌握網頁設計中的高級技巧

最佳答案

什麼是CSS偽類抉擇器？

CSS偽類抉擇器是一種用於抉擇存在特定狀況或偽狀況的元素的抉擇器。這些狀況或偽狀況並不是元素本身的屬性，而是元素在特定的交互或文檔構造中的表示。比方，當用戶將鼠標懸停在鏈接上時，這個鏈接就處於一個懸停狀況，而CSS偽類抉擇器可能用來為這個狀況定義款式。

CSS偽類抉擇器的品種

交相互關偽類

:hover

:hover 偽類是最常用的CSS偽類之一，它用於在用戶將鼠標懸停在元素上時改變其款式。

button:hover {
  background-color: #007BFF;
  color: white;
}

:active

:active 偽類在用戶激活（比方點擊）元素時利用款式。

button:active {
  background-color: #0056b3;
}

:focus

:focus 偽類表示元素獲得核心時的狀況，晉升網頁的可拜訪性。

input:focus {
  border-color: #66afe9;
}

構造性偽類

:first-child

:first-child 偽類抉擇作為其父元素的第一個子元素的元素。

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

:last-child

:last-child 偽類抉擇作為其父元素的最後一個子元素的元素。

ul li:last-child {
  color: red;
}

:nth-child(n)

:nth-child(n) 偽類抉擇第n個子元素。

ul li:nth-child(3) {
  color: blue;
}

靜態偽類

:valid

:valid 偽類抉擇符合驗證規矩的表單位素。

input:valid {
  border: 2px solid green;
}

:invalid

:invalid 偽類抉擇不符合驗證規矩的表單位素。

input:invalid {
  border: 2px solid red;
}

新增偽類

:unresolved

:unresolved 偽類用於抉擇尚未剖析的元素。

img:unresolved {
  opacity: 0.5;
}

:loading

:loading 偽類用於抉擇正在加載的元素。

img:loading {
  border: 2px solid blue;
}

實例分析

以下是一個利用偽類抉擇器的簡單實例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Pseudo-classes Example</title>
<style>
  /* 偽類抉擇器示例 */
  a:hover {
    color: red;
  }

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

  /* 構造性偽類抉擇器示例 */
  ul li:first-child {
    font-weight: bold;
  }

  /* 靜態偽類抉擇器示例 */
  input:valid {
    border: 2px solid green;
  }
</style>
</head>
<body>
<a href="https://www.example.com">Hover over me!</a>
<input type="text" placeholder="Type something...">
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<form>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>
</body>
</html>

在這個例子中，當用戶將鼠標懸停在鏈接上時，鏈接的文本色彩會變為白色。當文本框獲得核心時，它的邊框會變為藍色。列表中的第一個項會加粗表現。當用戶輸入有效的電子郵件地點時，輸入框的邊框會變為綠色。

總結

CSS偽類抉擇器是網頁計劃中非常富強的東西，它們可能讓我們根據元素的狀況或地位來利用款式，從而創建出更豐富、更靜態的用戶休會。經由過程進修跟控制這些高等技能，開辟者可能進一步晉升網頁的計劃品質。