CSS 样式规则选择器
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。如下：
?
按 Ctrl+C 复制代码按 Ctrl+C 复制代码?
?