<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 伪类专门用来表示元素的一种特殊的状态 比如：访问过的超链接，普通的超链接，，获取焦点的文本框 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类 1.正常链接 表示普通的链接，没访问过的链接 a:link 2.访问过的链接 a:visited(只能定义字体颜色) 表示访问过的链接 3.鼠标滑过的链接 a:hover 4.正在点击的链接 a:active 浏览器通过历史记录来判断一个链接是否访问过 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色 */ a:link { color:brown; font-size: 50px; } a:visited{ color: aquamarine; } a:hover{ color: blueviolet; } a:active{ color: black; } p:hover{ color: chartreuse; } /* 1.获取焦点： :focus 2.制定元素前 :before 3.制定元素后 :after 4.选中的元素 ::selection 文本框获取焦点以后修改背景颜色为黄色 */ input:focus{ background-color: yellow; } /* 为p标签中选中的内容使用样式 可以使用::selection为类 */ ::selection{ background-color: orange; } </style> </head> <a href="www.baid.com.cn">123</a> <a href="www.baiu.com.cn">123</a> <p>我是一个p标签</p> <input type="text" /> <body> </body> </html>