html学习7

最新推荐文章于 2024-10-02 23:04:10 发布

svsghshd

最新推荐文章于 2024-10-02 23:04:10 发布

阅读量42

点赞数

文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/svsghshd/article/details/128975551

版权

伪元素

定义：通过CSS设置的元素用于要实现某些效果，但是直接添加在html中会打乱结构

例： ::before 在……之前添加元素

::after在……之后添加元素

伪元素必须和content一起使用

<style>
        ul>li::before{
            content: "html1";
        }
        ul>li::after{
            content: "html2";
        }
    </style>
</head>
<body>
    <ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
    </ul>
</body>

运行结果会在li标签元素的前面添加html1在后面添加html2

伪选择器

设置元素和鼠标之间的交互

:link=》未访问时

:hover=》设置鼠标悬停时的样式，所有元素都可以使用

:active=》鼠标按下不松开,所有元素也是可以的

:visited=》鼠标松开，被访问过

使用顺序==》:link>:visited>:hover>:active

<style>
    .text:link {
        color: aqua;
    }

    .text:visited {
        color: blue;
    }

    .text:hover {
        color: red;
    }

    .text:active {
        color: blueviolet;
    }
</style>
</head>

<body>
<a href="#" class="text">html</a>
</body>