今天小编跟大家讲解下有关CSS控制链接显示状态的CSS伪类 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS控制链接显示状态的CSS伪类 的相关资料，希望小伙伴们看了有所帮助。
CSS控制元素的某种状态---伪类（用于向某些选择器添加特殊的效果） 伪类的语法：元素标签 伪类名称{属性：属性值;} a:link:未访问的链接 a:hover:鼠标移动到链接上 a:active:鼠标按下链接 a:visited:已访问的链接 如果在点击过后再返回到该页面还有一些效果的话 就按照该顺序给链接添加状态 L V H A 自定义链接的CSS类： a.类名称:状态(即选择符.类名称:伪类名称{属性：属性值}) 复制代码代码如下: <!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>CSS控制链接—CSS伪类</title> <style type="text/css"> a:link{text-decoration:none; color:#000;} a:visited{text-decoration:none; color:#6F0;} a:hover{text-decoration:underline; color:#00F;} a:active{text-decoration:overline; color:#F00;} a.web:visited{text-decoration:none; color:#000;} </style> </head> <body> <div id="link"> <a href="http://www.baidu.com"class="web">网页设计</a> | <a href="http://www.baidu.com">平面设计</a> | <a href="http://www.baidu.com">网站前端</a> | <a href="http://www.baidu.com">动画设计</a> | <a href="http://www.baidu.com">软件开发</a> | <a href="http://www.baidu.com">网页营销</a> <a href="http://www.baidu.com">我会闪</a> </div> </body> </html> :focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持) 复制代码代码如下: <!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>CSS控制链接—CSS伪类</title> <style type="text/css"> input{ width:200px; height:25px; border:2px solid #FF0; } input:focus{ background:#9FF; } </style> </head> <body> <label>用户名： <input type="text"name="username"/></label> <label>密 码： <input type="text"name="pwd"/></label> </body> </html>
来源：爱蒂网
