伪类选择器

伪类选择器

1. 1、伪类选择器，同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

代码实例：

<style>
        /* 还没有点击的链接 */
        
        a:link {
            color: red;
        }
        /* 已经点过的链接 */
        
        a:visited {
            color: green;
        }
        /* 鼠标移动上去的链接 */
        
        a:hover {
            color: purple;
            /* 鼠标移动上去变成小手手 */
            cursor: pointer;
        }
        /* 我们鼠标按下的过程显示的颜色 */
        
        a:active {
            color: orange;
        }
        /* 执行这个顺序  link  visited  hover  active       LoVe  HAte */
        
        div:hover img {
            font-size: 40px;
            /* 显示 */
            display: block;
        }
        
        img {
            /* 隐藏 */
            display: none;
        }
        /* 获取input输入框的焦点 */
        
        input:focus {
            background-color: #ff0088;
            width: 200px;
            height: 60px;
            outline: none;
        }
    </style>

    <a href="https://news.cctv.com/special/gdzg2021/syPAGEA3BHYvYOUoOLJXa11wbt220115/index.shtml">感动中国</a>

    <div>
        这是一些文字
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655023421&t=ed20337cea457de64b1db92ac267972e" alt="">
    </div>

    用户名 <input type="text"> 电话号 <input type="text">

常见的几类伪类选择器：

：first_child(选择第一个元素)
：last_chaild(选择最后一个元素)
：nth_child(n) (选择第n个元素)

代码实例 ：

    <ul>
        <li>这是第一个</li>
        <li>这是第二个</li>
        <li>这是第三个</li>
        <li>这是第四个</li>
        <li>这是第五个</li>
        <li>这是第六个</li>

    </ul>

  ul>li:last-child {
            color: violet;
        }

效果图

  ul>li:nth-child(3) {
            color: aquamarine;
        }

效果图：

  ul>li:not(:nth-child(3)) {
            color: pink;
        }

效果图：