CSS 样式规则选择器

主要有三种：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>

 

 

 

 

posted @ 2012-02-09 16:11  lihui_yy  阅读(2593)  评论(0)  编辑  收藏  举报