使用屬性選擇器可以篩選出設定了特定屬性的標簽。例如選取所有設定了title屬性的<img>標簽：
img[title]
這種選擇符的第一部分是標簽名（img），隨后是屬性名，放在方括號里：[title] 。
CSS不限制屬性選擇符只能使用標簽名，也可以使用類。例如：
.photo[title]
用于選取類為photo，而且設置了title屬性的全部元素。
屬性選擇符不僅可以選取設定了某個屬性的元素，還可以更進一步，選取屬性值為指定值的元素。比如我們想突出顯示指向某個URL的鏈接：
a[href="http://www.lxweimin.com/c/1681745eb504"] {
color: orange;
font-weight: bold;
}
又例如需要選取表單中的文本框
input[type="text"] {
color: #fff;
background: #aaa;
}
以下是屬性選擇符的其他用法
[attribute~=value]
選取含有attribute的屬性，且attribute屬性的值是以空格隔開的系列值，其中某個值為value的指定元素。
或者選取含有attribute的屬性，且attribute屬性只有一個value值的元素。
[attribute~=value]是[attribute=value] 的加強版。
HTML代碼
<p class="first test">我的簡書ID：KelvinZ</p>
<p class="second">這是第二個P元素</p>
<p class="test">第三個P元素</p>
<div class="test">這是一個div元素</div>
CSS代碼
p[class~="test"] {
background: pink;
}
[attribute|=value]
選取含有attribute的屬性，且attribute屬性的值是以連字符分隔的系列值，其中第一個值為value的指定元素。
HTML代碼
<p class="test-one">我的簡書ID：KelvinZ</p>
<p class="second-test">這是第二個P元素</p>
<p class="test">第三個P元素</p>
<div class="test">這是一個div元素</div>
CSS代碼
p[class|="test"] {
background: pink;
}
[attribute^=value]
選取含有attribute的屬性，且attribute屬性的值是以value開頭的指定元素。
HTML代碼
<p class="test-one">我的簡書ID：KelvinZ</p>
<p class="test-two">這是第二個P元素</p>
<p class="test">第三個P元素</p>
<div class="test">這是一個div元素</div>
CSS代碼
p[class^="test"] {
background: pink;
}
[attribute$=value]
選取含有attribute的屬性，且attribute屬性的值是以value結尾的指定元素。
HTML代碼
<p class="test-one">我的簡書ID：KelvinZ</p>
<p class="test-two">這是第二個P元素</p>
<p class="test">第三個P元素</p>
<div class="test">這是一個div元素</div>
CSS代碼
p[class$="two"] {
background: pink;
}
[attribute=value]*
選取含有attribute的屬性，且attribute屬性的值含有value的指定元素。
HTML代碼
<p class="test-one">我的簡書ID：KelvinZ</p>
<p class="test-two">這是第二個P元素</p>
<p class="test">第三個P元素</p>
<div class="test">這是一個div元素</div>
CSS代碼
p[class*="o"] {
background: pink;
}
其中[attribute^=value]、[attribute$=value]和[attribute*=value]是CSS 3.0新增的選擇符。
上面的選擇符匹配規則越嚴格優先級越高。
例如：img[title="Rabbit"] 選擇符定義的CSS樣式會覆蓋 img[title] 中相同定義的CSS樣式。
最后是我常用的屬性選擇符的地方。
比如我要把站外的鏈接用不同顏色的字體突出顯示。
a[href^="http://"]
要調整PDF文件padding：
a[href$=".pdf"]
HTML與CSS 目錄：HTML與CSS
上一篇：【CSS選擇符】偽類和偽元素
下一篇：【CSS選擇符】子代選擇符
