css的伪类

伪类(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*/

while True: print('studying...')