《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.2.2　CSS 3中的属性选择器

16.2.2　CSS 3中的属性选择器

在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。

1. [att*=val] 属性选择器

[att*=val]属性选择器的含义是：如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id*=section1]”，其中“id”相当于[att*=val]属性选择器中的“att”，“section1”相当于[att*=val]属性选择器中的“val”。

在代码清单16-1所述示例的样式代码中，如果使用如下代码中所示的[att*=val]属性选择器，则页面中id为“section1”“subsection1-1”“subsection1-2”的div元素的背景色都变为黄色，因为这些元素的id属性中都包含“section1”字符。

[id*=section1]{

    background-color: yellow;

}

代码清单16-1所述示例的样式代码中使用[att*=val]属性选择器后的运行结果如图16-2所示。

      图16-1　使用CSS 2的属性选择器的示例    图16-2　使用[att*=val]属性选择器的示例

2. [att^=val] 属性选择器

[att^=val]属性选择器的含义是：如果元素用att表示的属性的属性值的开头字符为用val指定的字符话，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id^=section1]”。

在代码清单16-1所述示例的样式代码中，如果将使用的[att=val]属性选择器改为使用如下所示的[att^=val]属性选择器，并且将val指定为“section”，则页面中id为“section1”“section2”的div元素的背景色都变为黄色，因为这些元素的id属性的开头字符都为“section”字符。

[id^=section]{

    background-color: yellow;

}

代码清单16-1所述示例的样式代码中使用[att^=val]属性选择器后的运行结果如图16-3所示。

3. [att$=val] 属性选择器

[att$=val]属性选择器的含义是：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id$=section1]”。

在代码清单16-1所述示例的样式代码中，如果采用如下所示的[att$=val]属性选择器，并且将val指定为“-1”，则页面中id为“subsection1-1”“subsection2-1”的div元素的背景色都变为黄色，因为这些元素的id属性的结尾字符都为“-1”字符。另外请注意该属性选择器中在指定匹配字符前必须加上“\”这个escape字符。

[id$=\-1]{

    background-color: yellow;

}

代码清单16-1所述示例的样式代码中使用[att$=val]属性选择器后的运行结果如图16-4所示。

      图16-3　使用[att^=val]属性选择器的示例   图16-4　使用[att$=val]属性选择器的示例