屬性選擇器(Attribute Selectors)用於選中符合屬性值條件的 HTML 元素,HTML 元素上會有一些屬性,例如 <a>
標籤有 title
屬性,我們就可以針對有 title
屬性的 <a>
元素來進行樣式設置。
用法有很多種~以下介紹七種常用的屬性選擇器用法:
💠 屬性選擇器-基本用法
1. 選中【具有】某屬性的元素
語法
情境範例
將 <input>
元素有 disabled
屬性的,背景變成天藍色。
這裡只針對 <input>
元素進行樣式設置,<textarea>
元素不會受到影響。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13
| 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>
|
1 2 3 4 5 6 7 8
| 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">
|
1 2 3 4 5
| 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
等等的檔名,是沒辦法匹配的!而這邊有一個小技巧,可以讓忽略大小寫之分,你可以這樣寫:
1 2 3 4 5
| img[src$=".png" i] { border: 3px solid orange; padding: 5px; background-color: gold; }
|
如此一來,不管大小寫,所有的 .png
都可以選中囉!
5. 屬性值【包含指定文字】的元素
語法
1
| [attr*="value"] { 屬性: 屬性值 }
|
情境範例
找到在 .btn
中,class
有包含「active」的元素,並給它醒目的黃色背景,常用於當前的標籤或是頁數。
1 2 3 4 5
| <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>
|
1 2 3 4 5 6 7 8 9 10
| .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>
|
1 2 3 4
| 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>
|
1 2 3 4
| span[lang|="fr"] { font-style: italic; color: #a94442; }
|
See the Pen
Attribute Selectors7 by Lala (@bobee)
on CodePen.
💠 總結
掌握 CSS 屬性選擇器能夠讓我們在樣式設計中更靈活地應對各種需求。透過精確選擇具有特定屬性值的元素,我們可以輕鬆地針對不同情境進行樣式設置,提升網頁的視覺效果和使用者體驗。
到目前為止已介紹了通用選擇器、元素選擇器、類選擇器、ID 選擇器、屬性選擇器,這些都是屬於基本選擇器的部份,明天開始要進入到複合選擇器囉!會有更多的組合變化等著我們~~
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。