屬性選擇器（Attribute Selectors）用於選中符合屬性值條件的 HTML 元素，HTML 元素上會有一些屬性，例如 <a> 標籤有 title 屬性，我們就可以針對有 title 屬性的 <a> 元素來進行樣式設置。

用法有很多種~以下介紹七種常用的屬性選擇器用法：

# 基本用法

1. 選中【具有】某屬性的元素

語法

[attr] { 
    屬性: 屬性值;
}

情境範例

將 input 元素有 disabled 屬性的，背景變成天藍色 skyblue，以提示使用者該欄位不可填寫。
這裡只針對 input 元素進行樣式設置，textarea 元素不會受到影響。

<input type="text" value="Lala Code" disabled />
<input type="password" value="123456" disabled />
<textarea cols="30" rows="10" disabled></textarea>

input[disabled] {
	background-color: skyblue;
}

2. 屬性值【完全等於】指定值的元素

語法

[attr="value"] { 
	屬性: 屬性值; 
}

情境範例

將所有目標為新窗口的 <a> 連結顏色設為 orange。
這樣可以清晰地標識出哪些會在新窗口中打開的連結。

<a href="/">首頁</a>
<a href="https://www.google.com.tw/" target="_blank">另開連結</a>

a[target="_blank"] {
  color: orange;
}

3. 屬性值【開頭】為指定值的元素

語法

[attr^="value"] { 屬性: 屬性值 }

情境範例

要顯示只有以 https 開頭的安全連結，並隱藏其他連結。這樣可以確保用戶只看到具有 SSL 安全憑證的網站。

<a href="http://www.123.com/">不安全的網站</a>
<a href="https://www.google.com.tw/">有SSL憑證的網站</a>

a {
  display: none;
}

a[href^="https"] {
  display: block
}

4. 屬性值【結尾】為指定值的元素

語法

[attr$="value"] { 屬性: 屬性值 }

情境範例

為 .png 格式的圖片設置半透明邊框，以突顯其透明背景。這樣有助於區分不同格式的圖片。

<img src="https://picsum.photos/200.jpg" >
<img src="https://imgur.com/rtc8PsM.png" width="200">

img[src$=".png"] {
  border: 3px solid rgba(0, 0, 0, 0.5);
  padding: 5px;
  background-color: #fff;
}

在 CSS 中是有大小寫之分的，如果是 .PNG 或是 .Png 等等的檔名，是沒辦法匹配的！而這邊有一個小技巧，可以讓忽略大小寫之分，你可以這樣寫：

img[src$=".png" i] {
  border: 3px solid rgba(0, 0, 0, 0.5);
  padding: 5px;
  background-color: #fff;
}

如此一來，不管大小寫，所有的 .png 都可以選中囉！

5. 屬性值【包含指定文字】的元素

語法

[attr*="value"] { 屬性: 屬性值 }

情境範例

高亮顯示所有包含「tag」字樣的標籤，使其更加醒目。這對於顯示帶有特定標籤的文章非常有用。

<span class="tag-news">NEWS</span>
<span class="tag-hot">HOT</span>
<span class="tag-old">old</span>

span[class*="tag"] {
  background-color: #ffeb3b;
  color: #000;
  padding: 3px 8px;
  border-radius: 4px;
}

6. 屬性值【包含指定單詞】的元素

語法

[attr~="value"] { 屬性: 屬性值 }

情境範例

針對 role 屬性中包含「admin」這個單詞的元素進行特殊樣式設置。例如，將用戶角色標籤中的「admin」部分設置為粗體和顏色突出。

<span role="admin">admin</span>
<span role="member">member</span>

span[role~="admin"] {
  font-weight: bold;
  color: #dc3545;
}

7. 屬性值【開頭等於指定文字或包括 - 號】的元素

語法

[attr|="value"] { 屬性: 屬性值 }

情境範例

在多語言網站中，針對所有以「fr」開頭的法語內容標籤（例如 fr 和 fr-CA）進行特殊樣式設置。這有助於區分不同語言的內容。

<span lang="en">en</span>
<span lang="fr">fr</span>
<span lang="fr-CA">fr-CA</span>

span[lang|="fr"] {
  font-style: italic;
  color: #a94442;
}

# 總結

掌握 CSS 屬性選擇器能夠讓我們在樣式設計中更靈活地應對各種需求。透過精確選擇具有特定屬性值的元素，我們可以輕鬆地針對不同情境進行樣式設置，提升網頁的視覺效果和使用者體驗。

到目前為止已介紹了通用選擇器、元素選擇器、類選擇器、ID 選擇器、屬性選擇器，這些都是屬於基本選擇器的部份，明天開始要進入到複合選擇器囉！會有更多的組合變化等著我們~~