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

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

💠 屬性選擇器-基本用法

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

語法

1
2
3

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

情境範例

將 <input> 元素有 disabled 屬性的，背景變成天藍色。
這裡只針對 <input> 元素進行樣式設置，<textarea> 元素不會受到影響。

<form>
  <div class="form-control">
    <label>Name</label>
    <input type="text" value="Lala Code" disabled />
  </div>
  <div class="form-control">
    <label>Password</label>
    <input type="password" value="123456" disabled />
  </div>
  <div class="form-control">
    <label>Message</label>
    <textarea name="" id="" cols="22" rows="4" disabled></textarea>
  </div>
</form>

1
2
3

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

See the Pen Attribute Selectors1 by Lala (@bobee) on CodePen.

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

語法

1
2
3

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

情境範例

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

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

a {
  margin: 36px;
  color: #4d4d4d;
  font-weight: bold;
  text-decoration: none;
  font-size: 32px;
  display: block;
  text-align: center;
}

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

See the Pen Attribute Selectors2 by Lala (@bobee) on CodePen.

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

語法

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

情境範例

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

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

a {
  /* ...省略字體樣式 */
  display: none;
}

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

See the Pen Attribute Selectors3 by Lala (@bobee) on CodePen.

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

語法

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

情境範例

為 .png 格式的圖片加上背景與邊框。這樣有助於區分不同格式的圖片。

1
2
3

<img src="https://imgur.com/sPoO74x.jpg">
<img src="https://imgur.com/sPoO74x.jpg">
<img src="https://imgur.com/3BnsnrK.png">

img[src$=".png"] {
  border: 3px solid orange;
  padding: 5px;
  background-color: gold;
}

See the Pen Attribute Selectors4 by Lala (@bobee) on CodePen.

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

img[src$=".png" i] {
  border: 3px solid orange;
  padding: 5px;
  background-color: gold;
}

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

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

語法

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

情境範例

找到在 .btn 中，class 有包含「active」的元素，並給它醒目的黃色背景，常用於當前的標籤或是頁數。

<button class="btn btn-active">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>

.btn {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 32px;
  cursor: pointer;
}

.btn[class*="active"] {
  background-color: gold;
}

See the Pen Attribute Selectors5 by Lala (@bobee) on CodePen.

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

語法

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

情境範例

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

1
2
3

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

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

See the Pen Attribute Selectors6 by Lala (@bobee) on CodePen.

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

語法

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

情境範例

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

1
2
3

<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;
}

See the Pen Attribute Selectors7 by Lala (@bobee) on CodePen.

💠 總結

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

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

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。