<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /* 伪类专门用来表示元素的一种特殊的状态 比如：访问过的超链接，聚焦过的文本框 当我们需要为处在特殊状态的元素设置样式是，可以使用伪类 */ /* 为没访问过的链接设置一个颜色为绿色 */ a:link{ /* link表示正常链接 */ color: lightseagreen; } a:visited{ /* visited表示访问过的链接 */ /* 浏览器通过历史记录来判断是否访问过一个链接 */ color:limegreen; /* 由于涉及到用户隐私问题，所以visited伪类，只能设置颜色属性 */ } a:hover{ /* 鼠标滑过时 */ color: black; } a:active{ /* 被点击的时候的状态 */ color: grey; } /* hover和active也可以为其他元素设置，不仅仅是a元素 （IE6不支持）*/ input:focus{ background-color: hotpink; /* 获取焦点 */ } p::selection{ background-color: red; /* 在火狐中需要使用::-moz-selection{} */ } p::first-letter{ font-size: 90px; } p::before{ content:"我会出现最前端"; color: red; /* before、after需要结合content这个元素进行使用 */ } </style> </head> <body> <a href="http://www.baidu.com">这是一个访问过的链接。</a> <br><br> <a href="http://www.360.com">这是一个没访问过的链接。</a> <br><br> <input type="text"> <p>This is a text aa aa aa aa!!!!</p> <p>本段落是用于测试伪元素。</p> <!-- 伪元素：表示元素中的一些特殊元素 --> </body> </html>
CSS学习记录——伪类选择器和伪元素
猜你喜欢
转载自www.cnblogs.com/yxl-/p/12435721.html
今日推荐
周排行