HTML5基本伪类

来源：互联网发布：网络购物狂欢节编辑：程序博客网时间：2024/05/20 16:44

1.hover伪类

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .div1{                height: 50px;                width: 100px;                border: 1px solid black;                text-align: center;            }            .div1 span{                line-height: 50px;            }            /*span:hover{                color: white;            }*/            .div1:hover{                background: deepskyblue;            }            .div1:hover span{                color: white;            }            /*.span1{                padding: 10px 30px;                border: 1px solid;                background: deepskyblue;            }            .span1:hover{                color: white;                background: yellow;            }*/        </style>    </head>    <body>        <!--<span class="span1">你很皮</span>-->        <div class="div1">            <span>你是真的皮</span>        </div>    </body></html>

2.a标签的四个伪类

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            a{                font-size: 36px;                text-decoration: none;            }            /*love hate\*/            /*未使用连接*/            a:link{                color: red;            }            /*已使用连接*/            a:visited{                color: green;            }            /*鼠标覆盖*/            a:hover{                color: blue;            }            /*已选择的连接*/            a:active{                color: yellow;            }        </style>    </head>    <body>        <a href="http://www.baidu.com">百度一下</a>    </body></html>

具体代码实现的现象，请用火狐浏览器打开查看。

阅读全文

0 0