屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
屬性選擇器:
簡單屬性選擇
如果希望選擇有某個屬性的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器。
a[href]
將同時有 href 和 title 屬性的 html 超連結的文字設定為紅色,可以這樣寫:
a[href][title]
根據具體屬性值選擇
除了選擇擁有某些屬性的元素,還可以進一步縮小選擇範圍,只選擇有特定屬性值的元素。
屬性與屬性值必須完全匹配
請注意,這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表,匹配就可能出問題。
請考慮一下的標記片段:
this paragraph is a very important warning.
如果寫成 p[class="important"],那麼這個規則不能匹配示例標記。
要根據具體屬性值來選擇該元素,必須這樣寫:
p[class="important warning"]
根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇,則需要使用波浪號(~)。
假設您想選擇 class 屬性中包含 important 的元素,可以用下面這個選擇器做到這一點:
p[class~="important"]
如果忽略了波浪號,則說明需要完成完全值匹配。
子串匹配屬性選擇器
很多現代瀏覽器都支援這些選擇器,包括 ie7
型別 描述
[abc^="def"] 選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"] 選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
CSS2的選擇器
選擇器 在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件,也就是 樣式 作用於網頁中的哪些元素。p 在html中用class 類選擇器名稱 引用 類選擇器名稱 在html中用id id選擇器名稱 引用 id選擇器名稱類選擇器與id選擇器的異同 兩者都能作用於所有標籤,不同的是 在乙...
css2的幾種特殊選擇器
以下均支援ie6以上版本的瀏覽器 1 屬性選擇器 title title qjyue77 title hello 上面的樣式對下面的html的效果為 可以應用樣式 h1 title hello world hello worldh2 title student hello hello w3schoo...
前端學習筆記 CSS 2 選擇器
交集選擇器 選擇器1 選擇器2 選擇器3 p h1 div選擇器分組 並集 選擇器1,選擇器2,選擇器3,選擇器4 p,h1,div,sapn子元素選擇器 父元素 子元素 div span後代元素選擇器 祖先 後代 div span兄 弟後面所有的兄弟選擇器 不會選中前面的兄弟 兄 弟指定屬性為ti...