<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style type="text/css"> /* 伪类专门用来表示元素的一种特殊的状态 比如: 访问过的超链接,比如普通的超链接,比如获取焦点的文本框 当我们需要为处在这些特殊状态的元素设置样式时,我们可以使用伪类 正常链接 - a:link 访问过的链接 - a:visited (只能定义字体颜色) 鼠标滑过的链接 - a:hover 正在点击的链接 - a:active :hover和:active也能为其他元素设置 IE6中不支持对超链接以外的元素设置:hover和:active 获取焦点 - :focus 指定元素前 - :before 指定元素后 - :after 选中的元素 - ::selection */ /* 没访问过得颜色 */ a:link{ color: #7FFF00; } /* 访问过的颜色 由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色 */ a:visited{ color: red; } /* 鼠标移过链接的颜色 */ a:hover{ color: #FF8C00; } /* 鼠标点击链接时的颜色 */ a:active{ color: #8A2BE2; } /* 获取焦点状态 IE6不支持 */ input:focus{ background-color: yellow; } /* 为p标签中选中的内容使用样式 selection选中内容 注意: 这个伪类在火狐中需要采用另一种方式编写 ::-moz-selection */ /* 兼容大部分浏览器 */ p::selection{ background-color: yellow; } /* 兼容火狐 */ p::-moz-selection{ background-color: #FF8C00; } </style> </head> <body> <a href="https://v3.bootcss.com/">访问过的链接</a> <a href="https://www.bootcdn.cn/">没访问过的链接</a> <input type="text"/> <p>selection选中内容</p> </body> </html>