• 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类


    a标签的伪类、内容伪类、索引伪类、取反伪类

    一、a标签的四大伪类

    • :link:未访问状态

    • :hover:悬浮状态

    • :active:活跃状态

    • :visited:已访问状态

    四大伪类也可用于其他标签

    <style type="text/css">
            a {
                color: #333;
                text-decoration: none;
            }
            /*:link为一个整体,代表超链接的初始状态*/
            a:link {
                color: orange;
            }
            /*:hover鼠标悬浮*/
            a:hover {
                color: green;
                /*鼠标样式*/
                cursor: pointer;
            }
            /*:active活动状态中(被鼠标点击中)*/
            a:active {
                color: red;
            }
            /*:visited访问过的状态*/
            a:visited {
                color: cyan;
            }

    二、内容伪类

    内容伪类的内容不能被选中

    • :before:内容之前

    • :after:内容之后

    .txt:before {
                content: "我是前缀~~~"
            }
            .txt:after {
                content: ">>>我是后缀"
            }

    三、索引伪类

    • :nth-child(n):位置优先,再匹配类型

    • :nth-of-type(n):类型优先,再匹配位置

    /*1.位置从1开始*/
    /*2.*/
    /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
    /*body a-baidu div01*/
    div:nth-child(2) {
        color: green;
    }
    
    /*先确定类型,再匹配位置*/
    /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
    div:nth-of-type(2) {
        color: cyan;
    }

    四、取反伪类

    除了selector以后的标签中内容操作

    • :not(selector):对selector进行取反

     

    五、案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            a {
                color: #333;
                text-decoration: none;
            }
            /*:link为一个整体,代表超链接的初始状态*/
            a:link {
                color: orange;
            }
            /*:hover鼠标悬浮*/
            a:hover {
                color: green;
                /*鼠标样式*/
                cursor: pointer;
            }
            /*:active活动状态中(被鼠标点击中)*/
            a:active {
                color: red;
            }
            /*:visited访问过的状态*/
            a:visited {
                color: cyan;
            }
            /*普通标签运用: :hover :active*/
            .box {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box:hover {
                background-color: orange;
                cursor: pointer;
            }
            .box:active {
                width: 400px;
                border-radius: 50%;
            }
    
    
            /*内容伪类*/
            .txt:before {
                content: "我是前缀~~~"
            }
            .txt:after {
                content: ">>>我是后缀"
            }
            
            /*伪类可以单独出现*/
            /*:after {
                content: "呵呵"
            }*/
    
    
            /*位置伪类*/
            /*1.位置从1开始*/
            /*2.*/
            /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
            /*body a-baidu div01*/
            div:nth-child(2) {
                color: green;
            }
            
            /*先确定类型,再匹配位置*/
            /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
            div:nth-of-type(2) {
                color: cyan;
            }
    
            /*2n*/
            /*
                div ooo div
                ooo div ooo
                div ooo div
            */
    
            /*3n*/
            /*
                div div ooo
                div div ooo
                div div ooo
            */
    
            /*3n - 1*/
            /*
                div ooo div
                div ooo div
                div ooo div
            */
    
            /*取反伪类*/
            /*:not([d]) {
                color: red;
            }
            body.body {
                color: orange;
            }*/
            span:not([d]) {
                color: red;
            }
        </style>
    </head>
    <body class="body">
        <!-- 1.a标签的四大伪类 -->
        <a href="./123.html">访问页面</a>
        <a href="https://www.baidu.com">访问过页面</a>
        <div class="box">box</div>
    
        <!-- 2.内容伪类 -->
        <div class="txt">原来的文本</div>
    
        <!-- 3.位置伪类 -->
        <div class="wrap">
            <span>span01</span>
            <div>div01</div>
            <div>div02</div>
        </div>
        
        <!-- 4.取反伪类 -->
        <span d>12345</span>
        <span dd>67890</span>
    </body>
    </html>
    View Code

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    Oracle varchar2最大支持长度(转)
    Java 内存溢出(java.lang.OutOfMemoryError)的常见情况和处理方式总结(转)
    Android java.net.SocketException四大异常解决方案
    Android 设定activity的进入和退出效果
    Android TabHost 动态修改图标或者动态改变标题
    Android TabHost中实现标签的滚动以及一些TabHost开发的奇怪问题
    Android 动态Tab分页效果
    Android ActionBar通过Tab进行不同的Fragment之间的交换
    Android 如何动态改变Actionbar上的item图标
    RGB颜色查询对照表
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9695884.html
Copyright © 2020-2023  润新知