CSS3 伪类和伪元素_html静态的伪类-CSDN博客

本文链接：https://blog.csdn.net/UserPython/article/details/106052130

CSS3 伪类和伪元素

伪类
- 静态伪类
- 动态伪类
伪元素

伪类

元素在不同状态表现不同样式，如点击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>