CSS 7.3 選擇器-屬性選擇器

1.匹配含有某屬性的元素

①匹配含有某屬性的所有元素。

格式： *[屬性] {宣告}

例如： *[title] { color：red；}  

②匹配含有某屬性的特定元素。

格式： 元素[屬性] {宣告}

例如： p[href] {color：red：}

③匹配同時含有屬性1屬性2···的特定元素。

格式： 元素[屬性1][屬性2]···{宣告}

例如： p[href][title] { color：red；}

2.匹配含有某屬性值的元素

例如1：

p[href=“http://www.w3school.com.cn/”] {color：red；}

例如2：

p[href=“http://www.w3school.com.cn/”][title=“W3School”] {color：red；}

注意：這種方式屬性值必須完全匹配。

例如：

HTML中：<p class=“important  warning”>···</p>

CSS中：

 p[class=“important  warning”] {}  //可以匹配

 p[class=“important”] {}  //不能匹配

3.匹配含有某單詞的屬性值的元素。

格式：[attribute~=value]

例如：

HTML中：<p class=“important  warning

CSS中：

p[class~=“important”] {} //可以匹配

p[title~=“ABC”] {}  //可以匹配

4.匹配指定值開頭的屬性值的元素，該值必須是整個單詞。

格式：[attribute|=value]

例如：

HTML中：<p href=“figure-1.gif”>···</p>

CSS中：

p[href|="figure"] {} //可以匹配

5.匹配含有指定值的屬性值的元素，該值不必是整個單詞。

例如：

HTML中：<p title=“abcdef-1-01”>···

例如：p[title^=“abcd”] {}   //可以匹配

例如：p[title$=“-01”] {}   //可以匹配

例如：p[title^=“f-1”] {}   //可以匹配

6.總結：attribute屬性，把···歸功於

注：value都要加上“”