CSS3 伪类和伪元素

最新推荐文章于 2025-06-12 23:19:00 发布

原创最新推荐文章于 2025-06-12 23:19:00 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

CSS3

20 篇文章

订阅专栏

本文深入探讨了CSS3中的伪类和伪元素应用，包括静态伪类（:link, :visited）、动态伪类（:hover, :active, :focus）以及伪元素（::first-letter, ::first-line, ::before, ::after）。通过实例展示了如何利用这些特性为网页元素添加动态样式和额外内容。

伪类

元素在不同状态表现不同样式，如点击a标签文本变红，放开变紫

静态伪类

只能用于超链接，用得少

:link 超链接未点击前的样式
:visited 超链接点击之后的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3静态伪类</title>
    <style type="text/css">
        a:link{color: aqua;}
        a:visited{color: yellow;}
    </style>
</head>
<body>
    <a href="####">静态伪类</a>
</body>
</html>

动态伪类

能用于任何元素

:hover 鼠标放到元素上的状态，最常用的状态
:active 鼠标点击元素时没有松开鼠标的状态，用得不多
:focus 输入框在获得焦点时的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态伪类</title>
    <style type="text/css">
        div:hover{color: red; font-size: 30px;}
        div:active{color: yellow;}
        input:focus{color: green;}
    </style>
</head>
<body>
    <div>动态伪类</div>
    <input type="text" value="请输入">
</body>
</html>

伪元素

在文档结构中没有出现的元素，使用双冒号：：

::first-letter 选择的是元素第一个字符
::first-line 选择的是元素中的第一行字符，会根据浏览器缩放自动跳整
::before 在元素内容之前添加新内容，必须配合content使用
::after 在元素内容之后添加新内容，必须配合content使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style type="text/css">
        /* div::first-letter{color: red;} */
        /* div::first-line{color: red;} */

        div::before{content: "我很霸道，我要插队！！！";}
        div::after{content: "我排在最后！！！"; color: red;}
    </style>
</head>
<body>
    <div>伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素
        伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素
    </div>
</body>
</html>