本文较为完整的介绍现代浏览器支持的CSS选择符（IE7+，FF 3+，Chrome 2+，Opera 9+），除特别说明的，也适用于IE6。
1.元素选择符
这是最简单也是最常用的选择符之一。它可以选择一类html元素标签，它的选择子就是元素名称。例如：
h1{color:red;}
也可以对多个元素使用同样的规则：
h1,h2{color:red;}
例如（为节省空间，仅保留style和body部分）：
<style type="text/css">
h1,h2{color:red;}
</style>
<body>
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
</body>
效果为：
2 类选择符和ID选择符
类选择符同样常用和基本。它可以选择具有相同class的元素。它的选择子是点号.加上类名。ID选择符可以选择具有某个ID的元素，其选择子是#加上ID. 类选择器前面有个点，使得它可以和其他选择符区分开来，从而可以和其他选择符混合使用，例如和元素选择符：
<style type="text/css">
.warning {font-style:italic;}
p.warning {color:red}
</style>
<body>
<p class="warning">Real Warning!</p>
<span class="warning">Common Worning</span>
</body>
第一条规则使得所有具有warning的class的元素都变成斜体。第二条规则使得具有class的p元素的颜色变成红色的。结果如下：
注意，第二条规则的选择符中间不能有空格：p .warning,这样的选择符具有其他含义，下面将会介绍。类选择符也能和类选择符一同使用，构成多类选择符，例如：
<style type="text/css">
.warning {font-style:italic;}
p.warning{color:red;}
p.warning.big{font-size:x-large;}
</style>
<body>
<p class="warning">Real Warning!</p>
<span class="warning">Common Worning</span>
<p class="big warning ">Warning and Big</p>
</body>
多类选择器要在IE7以上版本才能正确工作。
3 属性选择符
属性选择符可以根据元素的某一属性的值来选择元素。ID选择符和类选择符可以看作是特殊的属性选择符，其作用的属性分别是id和class.属性选择符在IE7以上版本能正确工作。
3.1 简单属性选择器
第一类属性选择符不在意某个属性的值是多少，只要具有某个属性就可以被选择。例如：
<style type="text/css">
*[id]{color:red;}
p[class]{color:blue;}
p[class][id]{font-size:x-large;}
</style>
<body>
<div >