使用屬性選擇器可以篩選出設(shè)定了特定屬性的標(biāo)簽站叼。例如選取所有設(shè)定了title屬性的<img>標(biāo)簽：
img[title]
這種選擇符的第一部分是標(biāo)簽名（img）轰胁，隨后是屬性名累奈，放在方括號里：[title] 散怖。
CSS不限制屬性選擇符只能使用標(biāo)簽名晒屎，也可以使用類。例如：
.photo[title]
用于選取類為photo钉鸯，而且設(shè)置了title屬性的全部元素吧史。
屬性選擇符不僅可以選取設(shè)定了某個屬性的元素，還可以更進(jìn)一步唠雕，選取屬性值為指定值的元素贸营。比如我們想突出顯示指向某個URL的鏈接：
a[href="http://www.reibang.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] 的加強(qiáng)版。
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結(jié)尾的指定元素。
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新增的選擇符雌团。
上面的選擇符匹配規(guī)則越嚴(yán)格優(yōu)先級越高燃领。
例如：img[title="Rabbit"] 選擇符定義的CSS樣式會覆蓋 img[title] 中相同定義的CSS樣式。
最后是我常用的屬性選擇符的地方锦援。
比如我要把站外的鏈接用不同顏色的字體突出顯示猛蔽。
a[href^="http://"]
要調(diào)整PDF文件padding：
a[href$=".pdf"]
HTML與CSS 目錄：HTML與CSS
上一篇：【CSS選擇符】偽類和偽元素
下一篇：【CSS選擇符】子代選擇符
