选择器的作用是找到对应的数据进行样式化。
选择器的格式
选择器{ 属性：属性值; }
常用选择器
标签选择器 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>