1.选择器的作用:找到所有指定的标签进行样式化。
2.选择器的种类
(1)标签选择器:找到所有指定的标签进行样式化。
格式: 标签名{ 样式1,样式2.... } 例子: div{ color:#F00; font-size:24px; }
(2)类选择器:使用类选择器首先要给html标签指定对应的class属性值
格式; .class的属性值{ 样式1,样式2... } 例子: .two{ backgrount-color:#0F0; color:#F00; font-size:24px; }
**类选择器的注意事项:
A. html元素的class属性值一定不能以数字开头。
B. 类选择器的样式是要优先于标签选择器的样式。
(3)ID选择器:使用ID选择器首先要给html元素添加一个id的属性值。
格式: #id属性值{ 样式1,样式2... }
**ID选择器注意事项:
A. ID选择器的样式优先级是最高的,优先于类选择器与标签选择器。
B. ID的属性值也是不能以数字开头的。
C. ID的属性值在一个html页面中只能出现一次。
(4)交集选择器:就是对选择器1中的选择器2里边的数据进行样式化
选择器1 选择器2{ 样式1,样式2... } 例子: .two span{ background-color:#999; font-size:24px; }
(5)并集选择器:对指定的选择器进行统一的样式化。
格式: 选择器1,选择器2..{ 样式1,样式2.. }
例子: span.a{ border-style:solid; border-color:#F00; {
(6)通过选择器:
格式: *{ 样式1,样式2... }
例子: *{ text-decoration:line-through; background-color:#CCC; }
3.伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的
注意:
(1) a:hover 必须被置于 a:link和a:visited 之后
(2) a:active 必须被置于 a;hover 之后。
a:link{color:#F00} /* 没有被点击过---红色 */
a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */
a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */
a:active{color:#FF0;}
伪类选择器的应用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css" > table{ background-color:#CCC; border-collapse:collapse; border:3px; } tr:hover{ background-color:#06F; } </style> <body> <table border="1px" width="400px" height="300px" align="center" > <tr> <th>姓名</th> <th>成绩</th> <th>人品</th> </tr> <tr> <td>张三</td> <td>98</td> <td>差</td> </tr> <tr> <td>李四</td> <td>50</td> <td>极好</td> </tr> <tr> <td>综合测评</td> <td colspan="2">不错</td> </tr> </table> </body> </html>