伪类和伪元素（四）

最新推荐文章于 2024-06-14 11:01:38 发布

馒头@Mm

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量118

点赞数

分类专栏：前端笔记文章标签：前端 html css

本文链接：https://blog.csdn.net/yan626413/article/details/125794078

版权

前端笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

伪类：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

接下我们学习有哪些常用的伪类：

hover：当鼠标指针在元素上悬停时触发。

visited：a标签的专用属性，表示访问过的。

focus：当元素成为焦点时触发。

焦点：用户可以交互的元素才能成为焦点。一个页面中同一时刻只有一个元素能够成为焦点。

伪元素：

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

1. ::first-letter ：选择元素文本中的第一个字。

代码解析：将p标签里文本的第一个字设置字体大小、背景颜色。

运行效果：

2 . ::first-line ：选择第一行

代码解析：将p标签内的文本第一行内容设置字体的颜色

运行效果：

3 . before：前缀伪元素，为元素添加一个前缀。

代码解析：设置内容前添加前缀

运行效果：

4 . after：后缀伪元素，为元素添加一个后缀。

代码解析：设置内容后添加后缀

运行效果：

代码参考（自由复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类和伪元素</title>
    <style>
        #link{
            text-decoration: none;
            color: black;
        }
        #link:hover{
            text-decoration: underline;
            color: blue;
        }

        span:hover{
            background-color: aqua;
        }
        #link:visited{
            color: grey;
        }
        #field:focus{
            width: 300px;
        }

        p{
            text-indent: 2em;
        }
        p::first-letter{
            font-size: 30px;
            background-color: #ccf;
        }
        p::first-line{
            color: red;
        }
        .currency::before{
            /* 前缀内容 */
            content: "￥";
            color: red;
            font-size: 30px;
        }
        .currency::after{
            /* 后缀内容 */
            content: "元";
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a id="link" href="https://www.baidu.com/">百度</a>
    <a id="link" href="https://www.runoob.com/css/css-pseudo-classes.html">火锅</a>
    <a id="link" href="https://v.qq.com/">腾讯</a>
    <br>
    <span>程少商</span>
    <br>
    <input type="text" id="field" name="" >
    <p>把我煮进火锅里吧 浪漫的四川人。请你一定要相信自己，一定要接受、喜欢自己的样子。一定要让自己变成你真心会喜欢的样子。如果你想要做的不是长辈所控制你的样子，不是社会所规定你的样子，请你一定要勇敢地为自己站出来，温柔地推翻这个世界，然后把世界变成我们的。</p>
    <table>
        <tr>
            <td>川味火锅</td>
            <td class="currency">298</td>
        </tr>
        <tr>
            <td>牛腩火锅</td>
            <td class="currency">398</td>
        </tr>
        <tr>
            <td>海鲜火锅</td>
            <td class="currency">498</td>
        </tr>
    </table>
</body>
</html>