在 Web 開發中，CSS 扮演著至關重要的角色，但很多開發者并沒有真正發掘它的全部潛力！

大多數人熟悉 ID 選擇器、類選擇器或元素選擇器，甚至偽元素的使用也很常見。然而，你知道 CSS 其實還有許多不為人知的強大選擇器嗎？

今天，就帶你揭秘一些鮮有人知但卻非常實用的 CSS 選擇器，讓你在樣式控制上更上一層樓！

1. 屬性選擇器

屬性選擇器可以根據 HTML 元素的屬性來應用樣式，而無需額外添加類或 ID。

基礎屬性選擇器

a[href] {
  color: blue;
}

這個選擇器會為所有包含 href 屬性的 <a> 元素添加藍色字體樣式。

指定屬性值的選擇器

input[type="text"] {
  border: 1px solid #ccc;
}

此規則僅作用于 type="text" 的輸入框。

匹配部分屬性值的選擇器

/* 以某個值開頭（^=） */
a[href^="https"] {
  color: green;
}

/* 以某個值結尾（$=） */
a[href$=".pdf"] {
  color: red;
}

/* 包含某個值（*=） */
a[href*="example"] {
  color: orange;
}

這些選擇器可以分別選中以 https 開頭的鏈接、以 .pdf 結尾的鏈接，以及包含 example 關鍵字的鏈接，并應用不同的樣式。

2. :nth-child() 選擇器

該偽類選擇器可以基于元素在其父元素中的位置來應用樣式：

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

這將使奇數序號的 <li> 元素具有不同的背景顏色。

3. :not() 選擇器

想要排除某些特定元素？:not() 選擇器可以幫你實現：

button:not(.primary) {
  background-color: grey;
}

以上代碼會為所有 不 具有 .primary 類的 <button> 按鈕應用灰色背景。

4. :focus 選擇器

提升用戶體驗和可訪問性的一種方式是給獲取焦點的元素添加樣式：

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

當輸入框獲得焦點時，會顯示一個藍色的外邊框。

5. ::before 和 ::after 偽元素

這兩個偽元素可以在某個元素的前后插入內容，無需修改 HTML 結構：

h1::before {
  content: "§ ";
  color: grey;
}

p::after {
  content: " (閱讀更多)";
  color: blue;
}

上面的示例會在所有 <h1> 標題前添加灰色的 "§ " 符號，并在每個 <p> 段落后面附加 "（閱讀更多）" 的藍色文本。

6. ::first-line 選擇器

想讓段落的首行樣式有所不同？可以這樣做：

p::first-line {
  font-weight: bold;
  color: red;
}

這會讓段落的首行變成 加粗 且 紅色。

7. ::first-letter 選擇器

如果你想讓段落的首字母更具視覺吸引力，可以使用 ::first-letter：

p::first-letter {
  font-size: 2em;
  color: green;
}

這樣，所有段落的第一個字母都會被放大，并且顏色變成綠色。

8. :empty 選擇器

這個選擇器可以選中 沒有子元素（包括文本內容）的 HTML 元素：

div:empty {
  border: 1px dashed red;
}

這樣，所有空的 <div> 元素都會帶有紅色虛線邊框。

9. :checked 選擇器

專門用于選中 復選框（checkbox） 或 單選按鈕（radio） 的樣式控制：

input[type="checkbox"]:checked + label {
  font-weight: bold;
}

當復選框被選中時，相關的 <label> 標簽會變成加粗字體。

10. 組合選擇器

CSS 選擇器可以組合使用，以實現更精準的樣式控制。例如：

a[href^="https"]:not([href*="example"])::after {
  content: " (安全)";
  color: green;
}

這個規則會為 以 https 開頭且不包含 "example" 關鍵字 的鏈接，在其后面添加綠色的 "（安全）" 標識。

結語

希望這篇文章能幫助你更好地理解 CSS 選擇器的強大之處。