python全栈笔记-前端2.05_伪类选择器

最新推荐文章于 2024-07-17 09:23:41 发布

原创最新推荐文章于 2024-07-17 09:23:41 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

notes 专栏收录该内容

26 篇文章

订阅专栏

本文通过实例展示了CSS伪类如:link, :visited, :hover, :active及伪元素::before和::after的使用技巧，详细解释了它们如何改变网页元素的样式，包括超链接的不同状态和文本的装饰效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">

        /*未被访问时超链接的样式*/
        a:link{
            background-color:yellow;
        }

        /*单击时超链接的方式*/
        a:visited{
            color:green;
        }

        /*鼠标悬停时超链接的状态*/
        a:hover{
            font-size:30px;
            color:#D81E91;
        }

        /*鼠标点击不松手时超链接的状态*/
        a:active{
            color:#3008D0;
        }

        /*获取焦点时的样式*/
        input:focus{
            background-color:#DC001F;
        }

        /*爱恨情仇原则 love hate*/


        /*伪元素选择器*/

        p:first-letter{
            font-size: 30px;
        }

        p:before{
            content:"哈哈";
            color: #7DCEC3;
        }

        p:after{
            content:"$";
            color:#3950D3;
        }








    </style>
</head>
<body>

    <ul>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">hao123</a></li>
        <li><a href="#">博客</a></li>

    </ul>

    <form>
        <input type="text" name="">
    </form>

    <p>来呀~~~~~~</p>


</body>
</html>