CSS 7.3 选择器-属性选择器

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”title=“ABC  DEF”>···</p>

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>

①以指定值开头，格式：[attribute^=value]

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

②以指定值结尾，格式：[attribute$=value]

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

③包含指定值，格式：[attribute*=value]

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

 

6.总结：attribute属性，把···归功于

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

注：value都要加上“”