19.2 属性选择器
19.2.1 属性选择器概述
在HTML中，通过各种各样的属性，我们可以给元素增加很多附加信息。例如，通过width属性，我们可以指定div元素的宽度，通过id属性，我们可以将不同的div元素进行区分，并且通过JavaScript来控制这个div元素的内容和状态。
接下来，我们在代码清单19-1中看一个HTML页面，该页面中包含一些div,每个div之间用id属性进行区分。
代码清单19-1 一个具有很多div元素的页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
</head>
<div id="section1">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
接下来，我们回顾一下CSS 2中对div元素使用样式的方法，如果要将id为"section1"的div元素的背景色设定为黄色，我们首先追加样式，如下所示。
<style type="text/css">
.divYellow{background:yellow}
</style>
然后指定id为"section1"的这个div元素的class属性，如下所示。
<div id="section1" class="divYellow">示例文本1</div>
接下来，我们看一下CSS2中如何使用属性选择器来实现同样的处理。
使用属性选择器时，需要声明属性与属性值，声明方法如下所示。
[att=val]
其中att代表属性，val代表属性值。例如，要将id为"section1"的div元素的背景色设定为黄色，我们只要在代码清单19-1中加入如下所示的样式代码即可。
<style type="text/css">
[id=section1]{
background-color: yellow;
}
</style>
最后，我们在代码19-2中完整地看一下使用CSS 2的属性选择器的示例代码，在本节中接下来的部分都只会针对这个示例中的样式代码进行修改，其他部分不做修改。
代码清单19-2 使用CSS 2的属性选择器的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
[id=section1]{
background-color: yellow;
}
</style>
</head>
<div id="section1" class="divYellow">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
追加了这个属性选择器后的运行结果如图19-1所示。
图19-1 使用CSS 2的属性选择器的示例
相关HTML 5与CSS 3权威指南：属性选择器概述