CSS 2 引入了屬性選擇器。

2021-09-01 18:16:26 字數 1231 閱讀 1745

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

屬性選擇器:

簡單屬性選擇

如果希望選擇有某個屬性的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器。

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...