Dev_Nick

导航

css（二）-- 选择器

选择器的作用是找到对应的数据进行样式化。

选择器的格式

　　选择器{  属性：属性值;  }

常用选择器

　　标签选择器        h2{  }
　　类选择器          .a {  }  <h2 class=“a”>           // 不能是数字
　　ID选择器          #a{  }  <h2 id=“a”>                // ID要唯一
　　交集选择器      h1,h2{  }
　　并集选择器(父类选择器) p a{  }
　　通用选择器             *{   }
　　伪类选择器  

选择器用法

1、标签选择器：找到所有指定的标签进行样式化

格式：

　　标签名{
                样式1；样式2....    
      }

2、类选择器: 使用类选择器首先要给html标签指定对应的class属性值

格式：

　　.class的属性值{
                样式1；样式2...    
      }

类选择器要注意的事项：
        1. html元素的class属性值一定不能以数字开头.
        2. 类选择器的样式是要优先于标签选择器的样式。

3、ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值

格式：

　　#id属性值{
                    样式1；样式2...    
      }

id选择器要注意的事项：
      1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
      2. ID的属性值也是不能以数字开头的。
      3. ID的属性值在一个html页面中只能出现一次（规范用法）。

4、交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化

格式：

　　选择器1 选择器2{
            样式1，样式2....    
        }

5、并集选择器： 对指定的选择器进行统一的样式化

格式：

　　选择器1,选择器2..{
                样式1；样式2...
            }

6、统配选择器:进行统一化样式

格式：

　　*{
            样式1；样式2...
       }

代码示例：

css代码

 1 /*标签选择器*/
 2 div{
 3     background-color: #FF0000;
 4     color: white;
 5 }
 6 /*类选择器*/
 7 .divClass{
 8     background-color: #00FF00;
 9     color: red;
10 }
11 /*id选择器*/
12 #divId{
13     background-color: #0000FF;
14     color: yellow;
15 }
16 /*交集选择器*/
17 div span{
18     background-color: yellow;
19 }
20 /*并集选择器*/
21 h3,p{
22     color: black;
23 }
24 
25 /*统配选择器*/
26 *{
27     text-decoration: line-through;
28 }

html测试代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link href="css/2.css" rel="stylesheet"/>
 7     </head>
 8     
 9     <body>
10         <div>标签选择器</div>
11         <div class="divClass">类选择器</div>
12         <div id="divId">id选择器</div>
13         <div>
14             <h3 align="center">div中的标题</h3>
15             <p>我就是</p>
16             <span>div中的span标签</span>
17         </div>
18         <span >div外的span标签</span>
19     </body>
20 </html>
21 
22

7、伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             a:link{color:#F00} /* 没有被点击过---红色 */
 8             a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */ 
 9             a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */
10             a:active{color:#FF0;}/* 按下的状态为---黄 */
11             
12         </style>
13     </head>
14     
15     <body>
16         <a href="#">百度</a>
17     </body>
18 </html>

注意：
     1. a:hover 必须被置于 a:link 和 a:visited 之后
     2. a:active 必须被置于 a:hover 之后

伪类选择器代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             table{
 8                 background-color:#CCC;
 9                 border-collapse:collapse;
10                 border:3px;
11             }
12             tr:hover{
13                 background-color:#06F;
14             }
15             
16         </style>
17     </head>
18     
19     <body>
20         <table border="1px" width="400px" height="300px" align="center" >
21             <tr>
22                 <th>姓名</th>
23                 <th>成绩</th>
24                 <th>人品</th>
25             </tr>
26             
27             
28             <tr>
29                 <td>张三</td>
30                 <td>98</td>
31                 <td>差</td>
32             </tr>
33            
34            
35             <tr>
36                 <td>李四</td>
37                 <td>50</td>
38                 <td>极好</td>
39             </tr>
40             
41             
42             <tr>
43                 <td>综合测评</td>
44                 <td colspan="2">不错</td>
45             </tr>
46         
47         
48         </table>
49     </body>
50 </html>

 

posted on 2017-01-15 15:43  Dev_Nick  阅读(199)  评论(0)  编辑  收藏  举报