伪类和为元素的区别是什么？-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_66166501/article/details/135220471

1，伪类的定义：伪类就是以：为前缀被添加到选择器结尾的关键字，当你想让你的样式在特定的状态下才会呈现到指定的元素上，就可以在这个元素的选择器后面加上相应的伪类。

1，动态伪类

：link :超链接没有被访问过的状态。

：visited:超链接被访问过的状态。

：hover:鼠标悬浮停留在上面的状态。

：active:当鼠标点击激活时候的状态。

：focus:获取焦点的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        /* link表示没有被访问过的网站颜色 */
        a:link{
            color: rgb(255,0,54)
        }
        /*visited 表示被访问过的网站颜色 */
        a:visited{
            color: rgb(232,126,18);
        }
        /* hover 鼠标停留在上面的颜色 */
        a:hover{
            color: blue;
        }
         /* active 鼠标停留在上面的颜色 */
        a:active{
            color: blueviolet;
        }
        /* 获取焦点的元素 */
        input:focus{
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <a href="https://ai.taobao.com/">淘宝的超链接</a>
    <label>
        <span>用户</span>
        <input type="text">
    </label>
</body>
</html>

动态伪类注意点：遵循LVHA即：link，visited，hover，active。

2，结构伪类

:first-child所有兄弟元素中的第一个。

:last-child所有兄弟元素中的倒数第一个。

:nth-child所有元素中的第n个。

:first-of-type所有同类元素中的第一个。

:last-of-type所有同类元素中的倒数第一个。

:nth-of-type所有同类中的第n个。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>结构伪类</title>
    <style>
        /* first-child是所有div下面的p元素第一个变红。
        切记:如果div下面的第一个元素它不是p那么第一个元素和p是不会发生任何变化的因为child是div下面的所有兄弟元素第一个，它找不到p
        
        */
         div>p:first-child{ 
            color: red;
        }
       /* last-child是div下面的最后一个p元素变红 */
        div>p:last-child{
            color: red;
        }
        /* 是div兄弟属性里面的第三个变蓝
        1，0 或 不写 ：什么都选不中 —— 几乎不用
        2，n ：选中所有子元素 —— 几乎不用
        3，1~正无穷的整数 ：选中对应序号的子元素
        4，2n 或 even ：选中序号为偶数的子元素