CSS 屬性選取器：依屬性與屬性值選取元素
使用 [、] 包覆特定屬性名稱，選取 HTML 文件上的特定屬性元素，屬性的大、小寫不需要相符。
以下案例便是利用 屬性選取器 將對象選取出來並進行樣式的改變。
屬性選取器的值
- 可使用單、雙引號來包覆，亦可不使用。
- 大、小寫必須相符。
- 包括空白。
七種比對寫法
| 寫法 | 說明 |
|---|---|
[attr] | 有這個屬性就選取，不管值是什麼 |
[attr="value"] | 值完全相等 |
[attr^="value"] | 值以此開頭 |
[attr$="value"] | 值以此結尾 |
[attr*="value"] | 值包含這段字串 |
[attr~="value"] | 以空白分隔的多個值中，有一個完全相符 |
[attr|="value"] | 值等於此字串，或以此字串加連字號開頭 |
css
/* 所有必填欄位 */
[required] { border-color: #dc2626; }
/* 只挑密碼欄位 */
input[type="password"] { letter-spacing: 0.2em; }
/* 外部連結加上圖示 */
a[href^="http"]::after { content: " ↗"; }
/* PDF 下載連結 */
a[href$=".pdf"] { font-weight: 600; }搭配 偽元素 就能替特定連結自動補上圖示，不必逐個加 類別。
大小寫規則
屬性 名稱 在 HTML 中不分大小寫，屬性 值 則必須完全相符。要讓值也忽略大小寫，在結尾加上 i：
css
a[href$=".PDF" i] { font-weight: 600; }常見問題
屬性名稱與值的大小寫需要相符嗎？
屬性名稱在 HTML 中不分大小寫，屬性值則必須完全相符。若想讓值也忽略大小寫，可以在中括號結尾的值後面加上一個 i。
什麼時候適合用屬性選取器？
元素本身已經帶有足以辨識的屬性時，例如：表單欄位 的各種 type、外部連結的網址開頭、特定副檔名的下載連結，就不必再額外加類別。
