6 CSS屬性選擇器

屬性選擇器：利用標籤的屬性對樣式的生效物件進行選擇。

我們在基本選擇器中學過class選擇器和id選擇器，它們也是標籤中的屬性，只是因為這兩個使用頻率很高，因此把它們抽離出來作為兩種獨立的選擇器。

我們如果想利用其他系統自帶的屬性去選擇樣式的生效物件，那麼就使用屬性選擇器。

格式一：基本選擇器[屬性]

意義：在基本選擇器後面用 [ ] 帶上屬性，表示帶有這個屬性的選擇器所對應的元素使用這個宣告中的樣式。

p1css

p[title]

效果：

這裡只有內容「p1」所在的標籤中帶有title屬性，因此只有它使用了樣式。

格式二：基本選擇器[屬性=屬性值]

意義：在基本選擇器後面用 [ ] 帶上屬性和屬性值，表示帶有這個屬性和對應屬性值的選擇器所對應的元素使用這個宣告中的樣式。

p1css

p[title=paragraph01]

效果：

這裡內容」p1「和」p3「所對應的元素都有title屬性，但是只有」p1「的屬性值是paragraph01，所以只有」p1「使用了樣式。

格式三：基本選擇器[屬性~=屬性值]

意義：在基本選擇器後面用 [ ] 帶上屬性和屬性值，並在屬性與屬性值之間的」=「前，加上」~「，表示帶有這個屬性且屬性的多個屬性值中有乙個是對應屬性值的選擇器所對應的元素使用這個宣告中的樣式。

p1css

p[title~=paragraph01]

效果：

這裡只有內容」p1「所對應的元素的title屬性的兩個屬性值之中，有乙個屬性值是paragraph01，因此只有它使用了樣式。

格式四：基本選擇器[屬性^=屬性值]

意義：在基本選擇器後面用 [ ] 帶上屬性和屬性值，並在屬性與屬性值之間的」=「前，加上」^「，表示帶有這個屬性且屬性的多個屬性值中是以對應屬性值開頭的選擇器所對應的元素使用這個宣告中的樣式。

p1css

p[title^=paragraph]

效果：

這裡內容」p1「所對應的元素的title屬性的屬性值是paragraph01 pp，

」p3「所對應的元素的title屬性的屬性值是paragraph03 pp，

兩個都是以paragraph開頭的，都符合屬性選擇器的要求，因此兩個都使用了樣式。

格式五：基本選擇器[屬性$=屬性值]

意義：在基本選擇器後面用 [ ] 帶上屬性和屬性值，並在屬性與屬性值之間的」=「前，加上」$「，表示帶有這個屬性且屬性的多個屬性值中是以對應屬性值結束的選擇器所對應的元素使用這個宣告中的樣式。

p1css

p[title$=pp]

效果：

這裡內容」p1「所對應的元素的title屬性的屬性值是paragraph01 kkpp，

」p3「所對應的元素的title屬性的屬性值是paragraph03 jjpp，

兩個都是以pp結束的，都符合屬性選擇器的要求，因此兩個都使用了樣式。