伪类(Pseudo-classes)：
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类：专用于控制链接的显示效果
''' a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } '''
before after伪类 ：
''' :before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello"; color:red} p:after 在每个 <p> 元素的内容之后插入内容 p:after{content:"hello"; color:red} '''
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的伪类"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="600;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>css的伪类</title> <link rel="stylesheet" href="day106.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <a href="https://www.baidu.com">点我啊</a> <div class="box"> <div class="top"></div> <div class="bottom"></div> </div> <div class="add">召唤师，</div> <div class="bf">英雄联盟</div> </body> </html>
a:link{ color: red; } /*没有接触过的链接，用于定义链接的常规状态*/ a:visited{ color: orangered; } /*访问过的链接，用于阅读文章，能清楚的判断已经访问过的链接*/ a:hover{ color: green; } /*鼠标放在链接上的状态，用于产生视觉效果*/ a:active{ color: yellow; } /*在链接上按下鼠标时的状态，用于表现鼠标按下时的链接状态*/ .box{ width: 200px; } /*将class属性值为box的标签宽度设置为200px*/ .top,.bottom{ width: 200px; height: 100px; background-color: green; } /*将class属性值为top和bottom的标签宽度设置为200px高度设置为100px背景颜色为green*/ /*.top:hover{*/ /* background-color: red;*/ /*}*/ /*鼠标悬浮到class属性值为top的标签时，背景颜色变为red*/ .box:hover .bottom{ background-color: red; } /*鼠标悬浮到class属性值为box的标签时，class属性值为bottom的标签背景颜色变为red(bottom在box盒子里)*/ .add:after{ content: "欢迎来到英雄联盟"; color: red; } /*在class属性值为add的标签后面添加文字且该文字颜色为red*/ .bf:before{ content: "我已经不玩"; color: deepskyblue; } /*在class属性值为bf的标签前面添加文字且该文字颜色为deepskyblue*/