十三、css常用的伪类别属性

css对<a>标签提供了相关可制动态效果的css伪类别属性,常用的属性如下：

属性	说明
a:link	超链接的普通样式
a:visited	被点击过的超链接样式
a:hover	鼠标指针经过超链接上时的样式
a:active	在超链接上单击时,既"当前激活"时超链接的样式

更多请看：http://www.runoob.com/css/css-link.html
其它伪类别属情：http://www.runoob.com/css/css-pseudo-elements.html

案例：

<!DOCTYPE html>
<html>
<head>
    <title>伪类别属性</title>
    <meta charset="utf-8">

    <style type="text/css">
        .mynav{
                padding: 0px;
            list-style-type: none;
        }

        .mynav li{
            width: 150px;
            height: 40px;
            
            list-style-type: none;
        }
        
        .mynav li a{
            width: 150px;
            height: 40px;
            display: block;
            text-align: center;
            border-radius: 5px;
            line-height:40px;
            overflow:hidden;
            font-size: 14px;

        }

        .mynav li a:link,.mynav li a:visited{
            text-decoration: none;
            background: #ffcc00;
            color: #202020;
        }

        .mynav li a:hover{
            text-decoration: none;
            background: blue;
            color: #fff;
        }

        
        


    </style>
</head>
<body>

    <ul class="mynav">
        <li><a class="aabbc" href="#">基本设置</a></li>
        <li><a href="#"><span>个人资料</span></a></li>
        <li><a href="#"><span>微博认证</span> </a></li>
        <li><a href="#"><span>黑名单</span> </a></li>
        <li><a href="#"><span>赞赏设置</span> </a></li>
        <li><a href="#"><span>账号管理</span> </a></li>
    </ul>

</body>
</html>

案例2：

<!DOCTYPE html>
<html>
<head>
    <title>menu伪类别案例</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            display: inline-block;
            list-style-type: none;
            padding: 0px;
        }
        ul li{
            width: 180px;
            height: 40px;
        }
        ul li a{
            background: pink;
            width: 180px;
            height: 40px; 
            font-size: 14px;
            display: inline-block;
            text-align: center;
            line-height:40px; 
            text-decoration: none;
        }
        ul li a:link,ul li a:visited{
            color: #222;
            text-decoration: none;
            border-radius: 5px;
        }

        ul li a:hover{
            background: #aabbcc;
            border-radius: 5px;
        }
        ul li a:active{
            background-color: orange;
        }
    </style>
</head>
<body>

    <ul>
        <li><a href="#">基础设置</a></li>
        <li><a href="#">个人资料</a></li>
        <li><a href="#">微博认证</a></li>
        <li><a href="#">黒名单</a></li>
        <li><a href="#">赞赏设置</a></li>
        <li><a href="#">账号管理</a></li>
    </ul>

    afdafdsafa

</body>
</html>

效果

QQ20171128-150628.gif

最后编辑于：2017.11.28 15:07:19