css伪类的使用

小半 • 2022年5月29日下午7:42 • 后端开发 • 阅读 182

CSS 伪类用于向某些选择器添加特殊的效果。

:active

点按，向被激活的元素添加样式

:focus

焦点输入，向拥有键盘输入焦点的元素添加样式

:link

当鼠标悬浮在元素上方时，向元素添加样式

:visited

链接已访问，向已访问的链接添加样式

css3新增的一对元素操作伪类

:first-child
last-child
… 参考文档

效果

demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css 伪类</title>
    <style>
        .btn{
            width: 80px;
            height: 36px;
            background-image: linear-gradient(#3296fa, red);
            color: #fff;
            font-size: 13px;
            text-align: center;
            line-height: 36px;
            border-radius: 4px;
        }
        .btn:hover{
            cursor: pointer;
        }
        .btn:active{
           background-image: linear-gradient(to right, #3296fa, red);
        }

        .input{
            width: 300px;
            height: 36px;
            margin: 15px 0;
        }
        input{
            width: 100%;
            height: 100%;
            outline: none;
            border-radius: 4px;
            border: 1px solid #ccc;
            padding: 0 15px;
            color: #333;
            font-size: 13px;
        }
        input:focus{
            /* background-image: linear-gradient(to right, #3296fa, red, yellow); */
            border-color: green;
        }
        .href{
            margin: 15px 0;
        }
        a:hover{
            color: green;
        }
        a:link{
            background: #ccc;
        }
        a:visited{
            color: red;
        }
        ul{
            padding: 0;
            margin: 15px 0;
            list-style: none;
        }
        li{
            width: 300px;
            height: 36px;
            margin-bottom: 15px;
            background-image: linear-gradient(to right, #3296fa, yellow);
        }
        li:first-child{
            background-image: linear-gradient(#3296fa, red);
        }
        li:last-child{
            background-image: linear-gradient(red, #3296fa);
        }
        
    </style>
</head>
<body>
    <pre>
        :active
        点按，向被激活的元素添加样式
        :focus
        焦点输入，向拥有键盘输入焦点的元素添加样式
        :hover
        当鼠标悬浮在元素上方时，向元素添加样式
        :link
        链接未访问，向未被访问的链接添加样式
        :visited
        链接已访问，向已访问的链接添加样式
        还有css3新增的一对元素操作伪类
        :first-child
        :last-child
        ....
    </pre>

    <div class="btn">Button</div>

    <div class="input">
        <input type="text">
    </div>

    <div class="href">
        <a href="https://blog.csdn.net/YuShiYue/article/details/103914030" target="_open">
            https://blog.csdn.net/YuShiYue/article/details/103914030
        </a>
    </div>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>