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

本节书摘来自华章出版社《html 5与css 3权威指南（第3版·下册）》一 书中的第19章，第19.2节，作者：陆凌牛，更多章节内容可以访问云栖社区“华章计算机”公众号查看。

在html中，通过各种各样的属性，我们可以给元素增加很多附加信息。例如，通过width属性，我们可以指定div元素的宽度，通过id属性，我们可以将不同的div元素进行区分，并且通过javascript来控制这个div元素的内容和状态。

接下来，我们在代码清单19-1中看一个html页面，该页面中包含一些div，每个div之间用id属性进行区分。

代码清单19-1　一个具有很多div元素的页面

<code>`</code>

然后指定id为“section1”的这个div元素的class属性，如下所示。

[att=val]<code>`</code>

其中att代表属性，val代表属性值。例如，要将id为“section1”的div元素的背景色设定为黄色，我们只要在代码清单19-1中加入如下所示的样式代码即可。

br&gt;"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"&gt;

xmlns="http://www.w3.org/1999/xhtml"&gt;

示例文本1

示例文本1-1

示例文本1-2

示例文本2

示例文本2-1

示例文本2-2

追加了这个属性选择器后的运行结果如图19-1所示。

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

[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^=section]{

}<code>`</code>

代码19-1所述示例的样式代码中使用[att^=val]属性选择器后的运行结果如图19-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字符。

<a href="http://lulingniu/">html5+css3权威指南</a>

<a href="http://lulingniu/css3.htm">css3的新特性</a>

<a href="photo.jpg">图像素材</a>

这段代码的运行结果如图19-5所示。

另外，如果使用ie浏览器来运行本示例，因为在ie 8之前尚未支持after伪元素选择器，所以该示例只能在ie 8之后的浏览器中正确显示，在接下来的“伪元素选择器概述”一节中将针对after伪元素选择器做详细说明。