CSS伪类选择器(锚点伪类、行为伪类)

来源：互联网发布：如何做淘宝天猫客服编辑：程序博客网时间：2024/05/21 06:13

CSS伪类选择器

html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>stu3-5 伪类选择器</title><link rel="stylesheet" href="../css/stu3-5.css" /></head><body><div class="a-div"><a class="a-href" href="https://www.baidu.com/">点击我</a><input type="text" name="" id="in" value="" /></div></body></html>

CSS代码

/*锚点伪类link：在链接中设置链接没有被访问前的颜色为灰色*/a:link{color: gray;}/*锚点伪类visited：在链接中设置链接没有被访问前的颜色为灰色*/a:visited{color: yellow;}.a-div{background-color: antiquewhite;}.a-href{font-size: 24px;color: red;}/*行为伪类hover：在用户把鼠标悬浮在元素上的样式*/a:hover{color: green;}/*行为伪类active：在用户把鼠标左键点击在元素上的样式*/a:active{color: blue;}/*行为伪类focus：在元素作为输入焦点时的样式*/input:focus{border-color: orange;color:red}/*行为伪类fbefore：在元素作为输入焦点时的样式*/a:before{content:"我将访问：";}/*行为伪类after：在元素作为输入焦点时的样式*/a:after{content:"，访问结束了";}

实现效果图

阅读全文

0 0