在 CSS 中，選擇器是用來選擇 HTML 元素並應用樣式的工具。除了基於標籤、類別、ID 等選擇元素外，CSS 也提供了強大的屬性選擇器（Attribute Selector）。
屬性選擇器允許我們根據元素的屬性來選擇元素，從而應用特定樣式。
這在處理像表單、連結、或具有自定義屬性的元素時非常實用。
本文將為新手介紹 CSS 屬性選擇器的概念、基本語法及常見應用範例，幫助你更靈活地控制網頁元素的樣式。
什麼是 CSS 屬性選擇器？
CSS 屬性選擇器 是一種根據 HTML 元素的屬性，來選擇元素並應用樣式的工具。
這意味著，你可以選擇擁有某個屬性或具有特定屬性值的元素，從而精確地為這些元素設置樣式。
這種方式相比於標籤、類別和 ID 選擇器更加靈活，特別是在需要針對元素的某些屬性進行樣式處理時。
CSS 屬性選擇器的基本語法
屬性選擇器的語法如下：
[屬性] {
/* 樣式規則 */
}
[屬性="值"] {
/* 樣式規則 */
}[屬性]：選擇擁有該屬性的所有元素。[屬性="值"]：選擇屬性等於指定值的元素。
CSS 屬性選擇器的常見應用
基於屬性名稱的選擇
你可以選擇具有某個屬性的所有元素，不管這個屬性的值是什麼。
這樣做可以方便地，為具有該屬性的元素統一設置樣式。
範例：
input[type] {
border: 2px solid blue;
}HTML：
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">在這裡，所有具有 type 屬性的 input 元素（如文本框、密碼框和提交按鈕）都會應用藍色邊框。
基於屬性值的精確選擇
當你希望針對某個屬性的具體值來選擇元素時，可以使用屬性值匹配選擇器。這是屬性選擇器中最常見的應用。
範例：
input[type="text"] {
background-color: lightyellow;
}HTML：
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">在這裡，只有 type 屬性等於 "text" 的 input 元素（文本框）會應用淺黃色的背景。
部分值匹配選擇器
有時候，你可能需要選擇屬性值中包含特定字符串的元素。
CSS 屬性選擇器提供了幾種匹配屬性值的方式，可以根據需要選擇最合適的模式。
1) [屬性^="值"]：選擇屬性值以某個字符串開頭的元素
這個選擇器會選擇那些屬性值以指定值開頭的元素。
範例：
a[href^="https"] {
color: green;
}HTML：
<a href="https://example.com">安全連結</a>
<a href="http://example.com">不安全連結</a>在這裡，所有 href 屬性以 "https" 開頭的連結（即 HTTPS 協議的安全連結）會變成綠色。
2) [屬性$="值"]：選擇屬性值以某個字符串結尾的元素
這個選擇器會選擇那些屬性值以指定值結尾的元素。
範例：
img[src$=".jpg"] {
border: 5px solid red;
}HTML：
<img src="photo.jpg" alt="Photo">
<img src="graphic.png" alt="Graphic">在這裡，只有 src 屬性以 .jpg 結尾的圖片會應用紅色邊框。
3) [屬性*="值"]：選擇屬性值中包含某個字符串的元素
這個選擇器會選擇那些屬性值中包含指定值的元素，不論它出現在屬性值的開頭、中間還是結尾。
範例：
a[href*="example"] {
color: orange;
}HTML：
<a href="https://example.com">Example 網站</a>
<a href="https://testexample.com">Test Example 網站</a>在這裡，所有 href 屬性中包含 "example" 字符串的連結都會變成橙色。
屬性選擇器的進階應用
選擇多個屬性值
你可以將多個屬性選擇器組合在一起，選擇具有多個屬性的元素。
這在需要為滿足多個條件的元素應用樣式時非常有用。
範例：
input[type="text"][name="email"] {
border: 2px solid green;
}HTML：
<input type="text" name="email" placeholder="Enter your email">
<input type="text" name="username" placeholder="Enter your username">在這裡，只有 type 為 "text" 並且 name 屬性為 "email" 的輸入框會有綠色邊框。
屬性選擇器的注意事項
屬性選擇器的性能
屬性選擇器在樣式表中功能強大，但如果在大型頁面上過度使用，可能會影響性能，尤其是在處理大量動態生成的內容時。
因此，應根據具體需求合理使用屬性選擇器，而不是盲目依賴。
瀏覽器兼容性
大多數現代瀏覽器都支持屬性選擇器，但在某些非常舊的瀏覽器中，可能會有不完全支持的情況。
在進行大範圍使用之前，建議檢查瀏覽器的兼容性。
結語
CSS 屬性選擇器為你提供了更靈活和精細的控制，讓你可以根據元素的屬性設置特定的樣式。
這不僅簡化了樣式的應用，還能提高頁面的可控性與易用性。
無論是選擇表單中的特定輸入框，還是根據屬性值匹配連結，屬性選擇器都能幫助你完成任務。
學會使用這些選擇器，能讓你的 CSS 代碼更加靈活、簡潔，並在應對複雜的網頁設計需求時更具應變力。