CSS的选择符分成：
1. 通配选择符
2. 元素选择符
3. 群组选择符
4. 关系选择符
5. id及class选择符
6. 伪类选择符
7. 属性选择符
8. 伪对象选择符
1.通配选择符（*）
* 号表示所有的对象。
所谓通配选择符，就是指可以使用模糊指定的方式来对象进行选择，指定样式。
例子源代码：
/* CSS代码 */
*{
color:gray;
}
<!-- HTML代码 -->
<body>
<p>这是灰色字体的p标签</p>
<span>这是灰色字体的span标签</span>
</body>
效果：
这是灰色字体的p标签
这是灰色字体的span标签
2.元素选择符
所谓元素选择符，指以网页中已有的标签名作为名称的选择符。
例子源代码：
/* CSS代码 */
p{
color:gray;
}
span{
color:brown;
}
<!-- HTML代码 -->
<body>
<p>这是灰色字体的p标签</p>
<span>这是棕色字体的span标签</span>
</body>
效果：
这是灰色字体的p标签
这是棕色字体的span标签
3.群组选择符
对一组标签进行相同的样式定义；使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式。
例子源代码：
/* CSS代码 */
p,span{
color:brown;
}
<!-- HTML代码 -->
<body>
<p>这是棕色字体的p标签</p>
<span>这是棕色字体的span标签</span>
</body>
效果：
这是棕色字体的p标签
这是棕色字体的span标签
4.关系选择符
a.包含选择符（E F）
选择所有被E元素包含的F元素。
例子源代码：
/* CSS代码 */
ul li a{
color:red;
}
<!-- HTML代码 -->
<body>
<ul>
<li>
<a href="">菜单项</a>
<ul>
<li><a href="">列表项1</a></li>
<li><a href="">列表项2</a></li>
<li><a href="">列表项3</a></li>
</ul>
</li>
</ul>
</body>
此例，使用ul li a，那么所有a标签都会变红色。
效果：
b.子选择符（E > F）
选择所有作为E元素的子元素F。
例子源代码：
/* CSS代码 */
.nav > li > a{
color:red;
}
<!-- HTML代码 -->
<body>
<ul class="nav">
<li>
<a href="">菜单项</a>
<ul>
<li><a href="">列表项1</a></li>
<li><a href="">列表项2</a></li>
<li><a href="">列表项3</a></li>
</ul>
</li>
</ul>
</body>
此例，使用.nav>li>a，那么只有.nav的li下面的a标签才会变红色。
效果：
c.相邻选择符（E + F）
选择紧贴在E元素之后的F元素。
例子源代码：
/* CSS代码 */
p+p{color:red;}
<!-- HTML代码 -->
<body>
<h3>这是一个标题</h3>
<p>这是第1个p标签</p>
<p>这是第2个p标签</p>
<h3>这是一个标题</h3>
<p>这是第3个p标签</p>
<p>这是第4个p标签</p>
</body>
此例，使用p+p{color:red;}，选择紧贴在p标签后的p标签，那么第2个p标签和第4个p标签将会变成红色。
效果：
这是一个标题
这是第1个p标签
这是第2个p标签
这是一个标题
这是第3个p标签
这是第4个p标签
d.兄弟选择符（E ~ F）
选择E元素的所有兄弟元素F。
例子源代码：
/* CSS代码 */
p~p{color:red;}
<!-- HTML代码 -->
<body>
<h3>这是一个标题</h3>
<p>这是第1个p标签</p>
<p>这是第2个p标签</p>
<h3>这是一个标题</h3>
<p>这是第3个p标签</p>
<p>这是第4个p标签</p>
</body>
此例，使用p~p{color:red;}，选择p标签的其它所有p标签，那么第2个p标签、第3个p标签和第4个p标签将会变成红色。
效果：
这是一个标题
这是第1个p标签
这是第2个p标签
这是一个标题
这是第3个p标签
这是第4个p标签
5.id及class选择符
id及class均是css提供由用户自定义标签名称的选择符，用户可以使用选择符id及class来面对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合HTML标签的目的。
a.id选择符（E#id）
id选择符可以为标有特定id的HTML元素指定特定的样式。
id选择器以“#”来定义。
*在网页中，一个id名称只能使用一次，不得重复。
例子源代码：
/* CSS代码 */
#content{
color:gray;
}
<!-- HTML代码 -->
<body>
<p id="content">正文内容</p>
</body>
效果：
正文内容
b.class选择符（E.class）
不同于id选择符的唯一性，class选择符可以同时定义多个。
例子源代码：
/* CSS代码 */
.a{
color:gray;
}
.b{
font-weight:bold;
}
<!-- HTML代码 -->
<body>
<p class="a b">正文内容</p>
</body>
效果：
正文内容
6.伪类选择符
伪类选择符种类特别多，这里并未列出所有的伪类选择符，但都支持现代浏览器（除了IE6-8）
这里，我举例几个常用的伪类选择符：
源代码：
/* CSS代码 */
a{
text-decoration:none; /*改变a链接的样式*/
}
a:link{
color:black; /*设置超链接a在未被访问前的样式*/
}
a:visited{
color:gray; /*设置超链接a在其链接地址已被访问过时的样式*/
}
a:hover{
color:blue; /*设置元素在其鼠标悬停时的样式*/
}
a:active{
color:red; /*设置元素在被用户激活时的样式*/
}
<!-- HTML代码 -->
<body>
<p><a href="###">点击我吧</a></p>
</body>
效果：
点击我吧