1. 屬性選擇器的種類
在 CSS 中，屬性選擇器可以根據 HTML 元素的屬性值（例如 id、class、name、type 等）來選擇元素。它們提供了選擇元素的靈活性和準確性，特別適合樣式化表單元素、連結和具有獨特屬性的其他項目。在這篇文章中，我們將討論各種屬性選擇器及其應用。
屬性選擇器分為幾個類別，可以根據屬性的存在、精確值或部分值來選擇元素。主要的屬性選擇器類型如下：
- 屬性選擇器：選擇包含特定屬性但不關心其值的元素。
- 帶有值的屬性選擇器：選擇屬性值等於指定值的元素。
- 具有特定開頭值的屬性選擇器：選擇屬性值以特定前綴開頭的元素。
- 具有特定結尾值的屬性選擇器：選擇屬性值以特定後綴結尾的元素。
- 屬性值包含特定子字串的選擇器：選擇屬性值中包含特定字串的元素。
- 用空格分隔的屬性值選擇器：選擇屬性值包含特定單詞並用空格分隔的元素。
- 用連字符分隔的屬性值選擇器：選擇屬性值包含特定單詞並用連字符分隔的元素。
2. 屬性選擇器 (Attribute Selector)
屬性選擇器選擇那些具有特定屬性（不考慮其值）的元素。當我們需要選擇所有具有特定屬性的元素時，這種選擇器非常有用。
input[type] {
border: 1px solid black;
}
<input type="text">
<input type="password">
<input type="email">
<input>
在這個例子中，所有帶有 type 屬性的 <input> 元素都會有黑色邊框，無論該屬性的具體值為何。
3. 帶有值的屬性選擇器
帶有值的屬性選擇器選擇那些屬性值等於某個指定值的元素。當我們需要選擇具有特定屬性值的元素時（例如，特定的文字輸入框或打開新標籤頁的連結），這種選擇器非常有用。
input[type="text"] {
background-color: #f0f0f0;
}
<input type="text">
<input type="password">
<input type="email">
這裡只有文字輸入框 <input type="text"> 會有淺灰色背景。
4. 具有特定開頭值的屬性選擇器
具有特定開頭值的屬性選擇器選擇那些屬性值以某個特定前綴開頭的元素。前綴在 ^= 後面指定。這種選擇器特別適合選擇所有指向特定網站的連結。
a[href^="https://example.com"] {
color: green;
}
<a href="https://example.com/page1">指向 example.com 的連結</a>
<a href="https://another.com">另一個連結</a>
只有第一個連結會被設置為綠色，因為它的 href 開頭是 "https://example.com"。
5. 具有特定結尾值的屬性選擇器
具有特定結尾值的屬性選擇器選擇那些屬性值以某個特定後綴結尾的元素。後綴在 $= 後面指定。這種選擇器非常適合選擇特定類型的文件，例如 .png 格式的圖片。
img[src$=".png"] {
border: 2px solid blue;
}
<img src="image1.png" alt="圖片 1">
<img src="image2.jpg" alt="圖片 2">
在這裡，只有副檔名為 .png 的圖片會有藍色邊框。
6. 屬性值包含特定子字串的選擇器
屬性值包含特定子字串的選擇器選擇那些屬性值包含某個指定字串的元素。子字串在 *= 後面指定。如果我們需要選擇屬性值中包含特定部分的元素（例如，指向某個特定網站區域的連結），這種選擇器非常有用。
a[href*="section"] {
font-weight: bold;
}
<a href="https://example.com/section1">第一部分連結</a>
<a href="https://example.com/about">關於我們</a>
<a href="https://example.com/section2">第二部分連結</a>
只有那些 href 中包含 "section" 的連結會被設置為加粗字體。
7. 用空格分隔的屬性值選擇器
用空格分隔的屬性值選擇器選擇那些屬性值包含特定單詞並用空格分隔的元素。對於這種選擇器，我們使用 ~= 符號。這種選擇器經常用於選擇包含多個值並用空格分隔的屬性，例如類名或其他屬性。
[class~="featured"] {
background-color: yellow;
}
<div class="featured item">具有 "featured" 類的元素</div>
<div class="item">普通元素</div>
<div class="highlight featured">另一個具有 "featured" 類的元素</div>
在這裡，只有那些類名中包含 featured 的元素會有黃色背景。
8. 用連字符分隔的屬性值選擇器
用連字符分隔的屬性值選擇器選擇那些屬性值以特定值開頭並且後面可能用連字符補充的元素。對於這種選擇器，我們使用 |= 符號。這種選擇器常用於選擇值開頭相同並可能有特定變化的屬性。
[lang|="en"] {
color: blue;
}
<p lang="en">英文文本</p>
<p lang="en-us">美式英文文本</p>
<p lang="fr">法文文本</p>
在這裡，只有那些 lang 屬性值是 "en" 或以 "en-" 開頭的元素會顯示為藍色，例如 "en-us"。
9. 不同屬性選擇器的應用範例
下面是一個 HTML 和 CSS 的範例，展示了不同屬性選擇器的使用。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>CSS 屬性選擇器範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="文字輸入框">
<input type="password" placeholder="密碼">
<input type="email" placeholder="電子郵件">
<a href="https://example.com/page1">連結到 example.com</a>
<a href="https://example.com/section2">部分連結</a>
<img src="image.png" alt="PNG 圖片">
<img src="photo.jpg" alt="JPG 圖片">
<div class="featured item">具有 "featured" 類的元素</div>
<div class="item">普通元素</div>
<div class="highlight featured">另一個具有 "featured" 類的元素</div>
<p lang="en">英文文本</p>
<p lang="en-us">美式英文文本</p>
<p lang="fr">法文文本</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>CSS 屬性選擇器範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="文字輸入框">
<input type="password" placeholder="密碼">
<input type="email" placeholder="電子郵件">
<a href="https://example.com/page1">連結到 example.com</a>
<a href="https://example.com/section2">部分連結</a>
<img src="image.png" alt="PNG 圖片">
<img src="photo.jpg" alt="JPG 圖片">
<div class="featured item">具有 "featured" 類的元素</div>
<div class="item">普通元素</div>
<div class="highlight featured">另一個具有 "featured" 類的元素</div>
<p lang="en">英文文本</p>
<p lang="en-us">美式英文文本</p>
<p lang="fr">法文文本</p>
</body>
</html>
/* 屬性選擇器 */
input[type] {
border: 1px solid black;
}
/* 帶有值的屬性選擇器 */
input[type="text"] {
background-color: #f0f0f0;
}
/* 具有特定開頭值的屬性選擇器 */
a[href^="https://example.com"] {
color: green;
}
/* 具有特定結尾值的屬性選擇器 */
img[src$=".png"] {
border: 2px solid blue;
}
/* 屬性值包含特定子字串的選擇器 */
a[href*="section"] {
font-weight: bold;
}
/* 用空格分隔的屬性值選擇器 */
[class~="featured"] {
background-color: yellow;
}
/* 用連字符分隔的屬性值選擇器 */
[lang|="en"] {
color: blue;
}
GO TO FULL VERSION