主要有三种：HTML选择器、class选择器、ID选择器
1.HTML选择器
1 <html>
2 <head>
3 <style type="text/css">
4 p{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>这里应用样式表</p>
13 </body>
14 </html>
也就是说选择器是HTML标签
2.class选择器
1 <html>
2 <head>
3 <style type="text/css">
4 .pclass{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p class="pclass">这里使用了.pclass 样式</p>
13 </body>
14 </html>
3.ID选择器
1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 #pid{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p id="pid">这里使用了#pid 样式</p>
13 </body>
14 </html>
4.关联选择器（也称包含选择器）
1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 p h2{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p><h2>这里使用了"p h2"样式</h2></p>
13 </body>
14 </html>
这里，"p h2"之间用空格分开，可以有更多标签，表示p段落中h2标题的样式
5.组合选择器
1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 p,h2{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>这里也使用了"p,h2"样式<h2>这里使用了"p,h2"样式</h2></p>
13 </body>
14 </html>
6.相邻选择器
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>aa.html</title> 5 <style type="text/css"> 6 div+p{ 7 font-size:20px; 8 color:red; 9 font-weight:bold; 10 } 11 </style> 12 </head> 13 <body> 14 <div>星期三</div> 15 <p>这里应用div+p样式</p> 16 <p>这里不再应用样式</p> 17 </body> 18 </html>
在本例中，只在紧挨着 div 后的 p 标签中使用所定义的样式。 、
7.子选择器
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>aa.html</title> 5 <style type="text/css"> 6 .test > strong{ 7 font-size:20px; 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="test"> 14 <strong>提示</strong> 15 <p>今天是<strong>儿童节</strong>哦~~</p> 16 <strong>系统提示</strong> 17 </div> 18 </body> 19 </html>
本例中，除 p 对象中的 strong 元素外，其他均为红色。
8.伪标签选择器
指对同一个HTML标签的各种状态进行规则定义，基本格式如下：
HTML标签 : 伪标签
{
样式规则……
}
目前较常用的伪标签有： A:active A:hover A:link A:visited P:first-line P:first-letter。如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>aa.html</title> 5 <!-- 下面分别分未访问、已访问、光标停留、激活后的样式 --> 6 <style type="text/css"> 7 a:link{ 8 color:#FF0000; 9 text-decoration:none; 10 } 11 a:visited{ 12 color:#00FF00; 13 text-decoration:none; 14 } 15 a:hover{ 16 color:#0000FF; 17 text-decoration:underline; 18 } 19 a:active{ 20 color:#FF00FF; 21 text-decoration:underline; 22 } 23 </style> 24 </head> 25 <body> 26 <a href="#">测试一下</a> 27 </body> 28 </html>