前端（六）—— 伪类选择器：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