• css---3链接伪类与动态伪类


    链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚

    链接伪类不可以加在div上

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--:link:表示作为超链接,并指向一个未访问的地址的所有锚-->
            <style type="text/css">
                a{
                    text-decoration: none;
                }
                a:link{
                    color: red;
                }
                #test:link{
                    background: pink;
                }
            </style>
        </head>
        <body>
            <a href="#">点我点我点我</a>
            <div id="test">我是div啦</div>
        </body>
    </html>
    View Code

    链接伪类visited:表示作为超链接,并指向一个已访问的地址的所有锚

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--:visited:表示作为超链接,并指向一个已访问的地址的所有锚-->
            <style type="text/css">
                a{
                    text-decoration: none;
                }
                a:link{
                    color: blue;
                }
                a:visited{
                    color: red;
                }
            </style>
        </head>
        <body>
            <a href="#">点我点我点我</a>
        </body>
    </html>
    View Code

    链接伪类target:代表一个特殊的元素,这个元素的id是URI的片段标识符。

                                可以利用target写一个div切换

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--:target 代表一个特殊的元素,这个元素的id是URI的片段标识符。--> 
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                div{
                     300px;
                    height: 200px;
                    line-height: 200px;
                    background: black;
                    color: pink;
                    text-align: center;
                    display: none;
                }
                :target{
                    display: block;
                }
            </style>
        </head>
        <body>
            <a href="#div1">div1</a>
            <a href="#div2">div2</a>
            <a href="#div3">div3</a>
            <div id="div1">
                div1
            </div>
            <div id="div2">
                div2
            </div>
            <div id="div3">
                div3
            </div>
        </body>
    </html>
    View Code

    动态伪类  :移入:hover ,移出:active

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #test:hover{
                    color: pink;
                }
                #test:active{
                    color: red;
                }
            </style>
        </head>
        <body>
            <div id="test">
                我是test
            </div>
        </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                a{
                    text-decoration: none;
                    color: black;
                    display: block;
                }
                a:hover{
                    font-size:24px;
                    /*color: red;*/
                }
                
                a:link{
                    font-size:48px;
                    /*color: pink;*/
                }
                a:visited{
                    /*font-size:96px;*/
                    /*color: deeppink;*/    
                }
            </style>
        </head>
        <body>
            <a href="#1">我是第一个a标签</a>
            <a href="#2">我是第二个a标签</a>
            <a href="#3">我是第三个a标签</a>
            <a href="#4">我是第四个a标签</a>
            <a href="#5">我是第五个a标签</a>
            <a href="#6">我是第六个a标签</a>
        </body>
    </html>
    实际应用
  • 相关阅读:
    开源微信管家平台——JeeWx 捷微4.0 微服务版本发布,全新架构,全新UI,提供强大的图文编辑器
    JeeWx全新版本发布!捷微二代微信活动平台1.0发布!活动插件持续开源更新!
    JEECG 3.7.8 新版表单校验提示风格使用&升级方法(validform 新风格漂亮,布局简单)
    Java快速开发平台——JEECG 3.7.8 版本发布!我们的目标是有鱼丸也有粗面
    企业如何快速搭建小程序官网
    如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联
    deepClone deepCompare
    fiddler
    spy-debugger
    队列
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11763955.html
Copyright © 2020-2023  润新知