昨天我們提到怎麼將多個選擇器一起搭配使用，組成複合選擇器、複雜選擇器，以及選擇器清單。
接下來我們要從屬性選擇器開始，繼續介紹其他類型的選擇器。
先前介紹的類別選擇器與ID選擇器，是依據元素的class或id屬性值挑選網頁內容。
如果想要依據其他屬性來挑選網頁內容，我們可以使用更通用的屬性選擇器。
在CSS中，這種通用、不限屬性類別的屬性選擇器分成七種。
以下分別介紹這七種屬性選擇器的篩選條件。
將屬性名稱以中括號[]包起來，就是最基本的屬性選擇器。
這種屬性選擇器的判斷條件是元素有沒有這個屬性。
只要網頁內容所屬的元素具有這個屬性就會被挑選到，無論屬性值是什麼。就算沒有賦值，是空字串也沒關係。
如果想要進一步判斷屬性值是否為指定值，可以使用完全相等的屬性選擇器。
在中括號裡，屬性名稱後面以等號=接著指定值，並將指定值以引號""包起來，就會是一個完全相等的屬性選擇器。
元素的屬性值需要完全等於指定值，才會被完全相等的屬性選擇器挑選出來。
需要注意的是，如果某個屬性有多個以空格相隔的屬性值，則這種屬性選擇器會將所有屬性值會被視作一整個字串。需要連同其間的空格，將這些屬性值依照順序一起寫出來，才會符合條件。
舉例來說，如果元素的class屬性同時具有兩個屬性值，為A B，則只有[class="A B"]才篩選得到這個元素。[class="A"]或[class="B"]篩選不到。
如果元素的某個屬性具有多個以空格相隔的屬性值，也可以使用部分相等的屬性選擇器，判斷指定值是否為多個屬性值之一。
部分相等的屬性選擇器，在等號前面多加了波浪號~。
這種屬性選擇器的效果類似於類別選擇器，只是適用的屬性更廣。[1]
舉例來說，如果元素的class屬性同時具有兩個屬性值，為AA BB，則[class="AA"]或[class="BB"]都能篩選到這個元素，就像是類別選擇器.AA或.BB一樣。
由於這種屬性選擇器在判斷是否為屬性值時，是以空格將多個屬性值作區隔，如果指定值包含空格，像是[class="AA "]，就不會符合。[2]
或是如果指定值不是完整的屬性值，[class="A"]，也不會符合這個選擇器的條件。
如果在等號前面加上垂直線|，則這個屬性選擇器的條件會是屬性值完全相等於指定值，或是屬性值以指定值加上連字號-開頭。
由於條件之一是完全相等，如果某個屬性有多個以空格相隔的屬性值，同樣需要將這些屬性值連同其間的空格一起寫出來，像是[class|="A B"]。
另一個條件，則能在以連字號區隔類似但不同的屬性值時派上用場。像是以連字號區隔語言與地區的lang屬性。
舉例來說，如果網頁內容以不同地區的英語寫成，有的lang屬性為en-us，有的屬性為en-au。這時就能以[lang|="en"]，將這些都是英語的內容挑選出來。
引入網頁的檔案是以連字號做分類時，這種屬性選擇器也很有幫助。
假如網頁中的企鵝圖片，檔案名稱是以penguin-開頭再加上序號，如penguin-1.jpg跟penguin-2.jpg。這時透過[src|="penguin"]，就能一次將全部的企鵝圖片都挑選出來。
需要注意的是，這種屬性選擇器在判斷屬性值是否以指定值加上-開頭時，也是將所有屬性值視作一個字串來處理。
如果某個屬性有多個以空格相隔的屬性值，那麼即使後面的屬性值是以指定值加上-開頭，也不符合條件。需要連同空格，將前面的屬性值一起加進指定值，才會符合條件。
舉例來說，如果元素的class屬性同時具有兩個屬性值，為A-A B-B，就無法使用[class｜="B"]篩選出這個元素。需要改成[class｜="A"]、[class｜="A-A B"]或完整的[class｜="A-A B-B"]才篩選得到。
如果想要判斷屬性值是否以指定值開頭，但後面不需要接著連字號的話，可以改成在等號前面加上插入符^。
由於指定值不需要接著連字號，這種屬性選擇器適用的情境比起加上|的還廣。
除了前面提到的lang屬性跟檔案名稱外，也可以用來判斷連結種類。像是可以用a[href^="mailto:”]來篩選出電子信箱的連結。
需要注意的是，這種屬性選擇器在判斷時，同樣也是將所有屬性值視作一個字串來處理。
所以當某個屬性有多個空格相隔的屬性值時，不能單純判斷後面的屬性是否以指定值開頭。需要將前面的屬性值連同空格一起加進指定值，才會符合這種屬性選擇器的條件。
除了開頭，也可以判斷屬性值是否以指定值結尾。
這種屬性選擇器在等號前面加入的是金錢符號$。
一種常見的用途是以副檔名判斷檔案類型。像是以a[href$=".pdf"]、a[href$=".jpg"]判斷連結的檔案類型；還有以img[src=".gif"]、img[src="jpg”]判斷圖片的檔案類型。
也可以用這種屬性選擇器來判斷網址的網域名稱，像是a[href$=".tw"]、a[href$=".edu"]。
需要注意的是，這種屬性選擇器在判斷時，同樣也是將所有屬性值視作一個字串來處理。
所以當某個屬性有多個空格相隔的屬性值時，不能單純判斷前面的屬性是否以指定值開頭。需要將後面的屬性值連同空格一起加進指定值，才會符合這種屬性選擇器的條件。
除了開頭跟結尾，也可以只判斷屬性值是否包含指定值。
這種屬性選擇器在等號前面加入的是星號*。
雖然這種屬性選擇器在判斷時同樣也是將所有屬性值視作一個字串來處理，但由於只判斷是否包含指定值，使用時就不需要將前面或後面的其他屬性值一起寫出來。
因為沒有這個限制，適用的情境也更廣。
像是以a[href*="ithelp"]挑選網頁中通往IT邦幫忙的連結；或是以[src*="penguin"]挑選網頁中的企鵝圖片。
之前在介紹基本的四種選擇器時，有提到CSS是否區分大小寫，主要是依據檔案使用的語言。
在HTML中，有些屬性的值有區分大小寫，像是class跟id屬性。有些屬性則沒有，在規範中有列出。
不過，雖然基本上是依據檔案使用的語言，在使用屬性選擇器時也可以另外設定，將屬性值改成不區分大小寫，或是區分大小寫。[2]
如果想讓屬性值不區分大小寫，可以在屬性選擇器的右括號]前加上i。
像是[class="today" i]，就能挑選出class屬性值為Today的內容。
如果想讓屬性值區分大小寫，可以在屬性選擇器的右括號]前加上s。
像是[lang="en" s]，就不會挑選出lang屬性值為En的內容。
接下來，實際來練習看看，怎麼使用這些屬性選擇器吧。
以下是網頁內容的HTML程式碼。
<article>
<p>
<a target="" href="https://ithelp.ithome.com.tw/2025ironman/"
>2025 iThome鐵人賽</a
>
</p>
<p>
<a href="https://ithelp.ithome.com.tw/users/20116445/ironman/8702"
>前端迷走中：從零開始的新手之路</a
>
</p>
<ol>
<li class="day1-1 15-09-2025">[Day 01] 前言──沒有在跟你立flag的</li>
<li class="day2-1 16-09-2025">[Day 02] 嗨，HTML──網頁的基本組成</li>
<li class="day3-1 17-09-2025">[Day 03] 嗚咿咿啊咿──淺談HTML的語法</li>
<li class="day4-1 18-09-2025">
[Day 04] 看不見的頭──HTML的<head>裡裝了什麼？
</li>
<li class="day5-1 19-09-2025">
[Day 05] 寫不出來先排版──HTML文字編排入門
</li>
<li class="day6-1 20-09-2025">
[Day 06] 幫網頁劃出界線──HTML的語意化結構元素
</li>
</ol>
</article>
以及最終呈現的結果：
a[target] {
font-size: 26px;
}
以a[target]調整連結的字體大小。
連結「2025 iThome鐵人賽」有加上target屬性。即便沒有設定屬性值，字體依然變大；
連結「前端迷走中：從零開始的新手之路」沒有加上target屬性，字體沒有變大。
[class="day1-1 15-09-2025"] {
color: red;
}
[class="day1-1"] {
text-decoration: underline;
}
對[Day 01]的文章，做了兩個設定。
[class="day1-1 15-09-2025"]將文字設為紅色。
指定值包含所有屬性值與其間的空格，與所有屬性值組成的整體字串完全相等。因此樣式套用成功。
[class="day1-1"]將文字畫上底線。
指定值只包含其中一個屬性值，與整體字串沒有完全相等。因此樣式套用失敗。
[class~="day2-1 16-09-2025"] {
color: orange;
}
[class~="day2-1"] {
text-decoration: underline;
}
[class~="day2-1 "] {
font-style: italic;
}
對[Day 02]的文章，做了三個設定。
[class~="day2-1 16-09-2025"]將文字設為橘色。
雖然指定值把所有屬性值和空格合在一起，但這樣的字串並不是以空格分隔的個別屬性值之一。因此樣式套用失敗。
[class~="day2-1"]將文字畫上底線。
指定值為屬性值之一，符合條件。因此樣式套用成功。
[class~="day2-1 "]將文字變成斜體。
指定值在結尾多加了空格，與任何一個屬性值都不相等。因此樣式套用失敗。
[class|="day3-1 17-09-2025"] {
color: gold;
}
[class|="day3-1"] {
text-decoration: underline;
}
[class|="day3"] {
font-style: italic;
}
[class|="17-09"] {
background-color: grey;
}
對[Day 03]的文章，做了四個設定。
[class|="day3-1 17-09-2025"] 將文字設為金色。
指定值包含兩個屬性值與其間的空格，與所有屬性值組成的整體字串完全相等。因此樣式套用成功。
[class|="day3-1"] 將文字畫上底線。
指定值只包含其中一個值，與整體字串沒有完全相等。因此樣式套用失敗。
[class|="day3"] 將文字變成斜體。
前面屬性值的開頭就是整體字串的開頭。將指定值設為前面屬性值day3-1的開頭，符合條件。因此樣式套用成功。
[class|="17-09"] 將背景顏色設為灰色。
指定值設為後面屬性值17-09-2025的開頭，但仍然不是整體字串的開頭。因此樣式套用失敗。
[class^="day4"] {
color: green;
}
[class^="18-09"] {
text-decoration: underline;
}
[class^="day4-1 18-09"] {
font-style: italic;
}
對[Day 04]的文章，做了三個設定。
[class^="day4"] 將文字設為綠色。
前面屬性值的開頭就是所有屬性值組成的整體字串的開頭。將指定值設為前面屬性值day4-1的開頭，符合條件。因此樣式套用成功。
[class^="18-09"] 將文字畫上底線。
指定值設為後面屬性值18-09-2025的開頭，但仍然不是整體字串的開頭。因此樣式套用失敗。
[class^="day4-1 18-09"]將文字變成斜體。
在後面屬性值的開頭前，連同空格加上前面屬性值變成day4-1 18-09。是整體字串的開頭，符合條件。因此樣式套用成功。
[class$="9-09-2025"] {
color: blue;
}
[class$="5-1"] {
text-decoration: underline;
}
[class$="5-1 19-09-2025"] {
font-style: italic;
}
對[Day 05]的文章，做了三個設定。
[class$="9-09-2025"] 將文字設為藍色。
後面屬性值的結尾就是所有屬性值組成的整體字串的結尾。將指定值設為後面屬性值19-09-2025的結尾，符合條件。因此樣式套用成功。
[class$="5-1"] 將文字畫上底線。
指定值設為前面屬性值day5-1的結尾，但仍然不是整體字串的結尾。因此樣式套用失敗。
[class$="5-1 19-09-2025"]將文字變成斜體。
在前面屬性值的結尾後，連同空格加上後面的屬性值變成5-1 19-09-2025。是整體字串的結尾，符合條件。因此樣式套用成功。
[class*="20-09"] {
color: purple;
}
[class*="6-1"] {
text-decoration: underline;
}
[class*="6-1 20-09"] {
font-style: italic;
}
對[Day 06]的文章，做了三個設定。
[class*="20-09"] 將文字設為紫色。
後面屬性值的開頭包含在所有屬性值組成的整體字串中。將指定值設為後面屬性值20-09-2025的開頭，符合條件。因此樣式套用成功。
[class*="6-1"]將文字畫上底線。
前面屬性值的結尾包含在整體字串中。將指定值設為前面屬性值day6-1的結尾，符合條件。因此樣式套用成功。
[class*="6-1 20-09"] 將文字變成斜體。
前面屬性值的結尾後到後面屬性值的開頭，仍然是整體字串的一部分。將屬性值設為6-1 20-09，符合條件。因此樣式套用成功。
今天我們介紹了不限種類，對任何屬性都能使用的屬性選擇器。
屬性選擇器可以分成七種，有各自的判斷條件。
最基本的[attribute]判斷元素是否添加屬性，不論屬性值為何。
[attribute="value"]判斷是否指定值等於所有屬性值組成的整體字串；[attribute~="value"]則只判斷指定值是否為屬性值之一。
[attribute^="value"]判斷整體字串是否以指定值開頭；[attribute$="value"]判斷整體字串是否以指定值結尾；[attribute*="value"]則只判斷整體字串中是否包含指定值。
[attribute|="value"]有兩個條件，元素符合一個就會被選中。
一個類似[attribute="value"]，判斷指定值是否等於整體字串；
另一個則類似[attribute^="value"]，判斷整體字串是否以指定值加上-開頭。
[1] CSS大全，第四版。
[2] W3C, Selectors Level 4
iThome鐵人賽
看影片追技術