Css详解之(伪类选择器)
2016-05-22 17:05
666 查看
<!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> <style type="text/css"> /* 伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。 注意: 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;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <a href="#">百度</a> </body> </html>伪类选择器案例:
<!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>
相关文章推荐
- web前端新手需要认识的CSS;css共有多少标签呢?
- Css详解之(选择器)
- Css详解之(选择器)
- css text-indent:999em
- CSS引入
- CSS引入
- 5.css字体
- CSS 背景background实例
- (6)css盒子模型(基础下)
- Flexbox布局(2)
- CSS属性集合
- CSS3-过渡属性,CSS3-动画
- Chapter 2. HTML---CSS样式表(格式与布局)
- 【HTML/CSS】浮动结构深入浅出
- CSS伪类选择器 -- nth-child(an+b):
- pyspider 爬虫教程(一):HTML 和 CSS 选择器
- css伪类 伪元素
- 写css的一些小技巧
- css display table-cell
- css 10 款非常棒的CSS代码格式化工具推荐