HTML 5与CSS 3权威指南：CSS 3中的属性选择器

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

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

　　[id*=section1]{

　　background-color: yellow;

　　}

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

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

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

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

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

　　[id^=section]{

　　background-color: yellow;

　　}

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

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

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

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

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

　　[id$=\-1]{

　　background-color: yellow;

　　}

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

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