整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
秘HTML标签中的伪元素与伪类：
它们的区别及应用场景深度解析
在Web前端开发的世界中，HTML作为网页内容的基础语言，其标签元素的运用对于页面构建至关重要。然而，HTML标签的功能并非仅限于直观呈现的元素本身，还存在着一种特殊的扩展手段——伪元素与伪类。它们如同HTML标签的魔法附魔，赋予原本静态的元素动态行为与视觉效果，极大地丰富了网页设计的可能性。本文将深度解析伪元素与伪类的概念、区别以及在实际项目中的应用场景，辅以具体代码示例，帮助您全面掌握这一强大工具。
1. 伪元素
**定义：** 伪元素是一种虚拟的HTML元素，它不存在于文档树中，但可以通过CSS样式来创建和控制其外观与行为。它们被用于插入额外的文本或生成新的可视化内容，通常以双冒号`::`进行标识。
举例：
css
p::before {
content: "【注】";
color: red;
}
上述代码中，我们为`<p>`元素添加了一个`::before`伪元素，它会在每个段落开头插入文本“【注】”，并赋予红色字体颜色。这种技术常用于添加装饰性元素、注释标记等。
2. 伪类
**定义：** 伪类是一种特殊的状态或条件，用于描述HTML元素在特定时刻或满足某种逻辑条件时的样式。它们通过单冒号`:`进行标识，作用于已存在于文档树中的真实元素上，无需改变DOM结构即可实现状态切换。
举例：
css
a:hover {
color: blue;
text-decoration: underline;
}
在这个例子中，我们为`<a>`元素定义了`:hover`伪类，当用户鼠标悬停在链接上时，链接文字变为蓝色并显示下划线，实现了交互式反馈。
1. 存在形式
- **伪元素**：创建了实际不存在于HTML源码中的新内容，如生成文本、图形等。
- **伪类**：基于已有元素的不同状态（如鼠标悬停、访问历史等）改变其样式，不生成新内容。
2. 应用场景
- **伪元素**：主要用于添加装饰性元素、生成内容提示、分隔符、引用符号等，增强内容的可读性和美观度。
- **伪类**：广泛应用于交互反馈、导航菜单高亮、表单验证状态、列表项计数等，实现动态样式变化。
3. 选择器标识
- **伪元素**：使用双冒号`::`进行标识，如`::before`、`::after`、`::first-letter`、`::first-line`等。
- **伪类**：使用单冒号`:`进行标识，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。
1. 伪元素的应用
(a) 内容修饰与补充
css
blockquote::before,
blockquote::after {
content: '"';
font-size: 2em;
line-height: 0.8;
color: #999;
vertical-align: middle;
}
blockquote::before {
margin-right: 0.5em;
}
blockquote::after {
margin-left: 0.5em;
}
上述代码使用`::before`和`::after`伪元素为`<blockquote>`元素两侧添加引号，增强了内容的识别度。
(b) 清除浮动与分隔符
css
.clearfix::after {
content: "";
display: block;
clear: both;
}
ul.list > li + li::before {
content: "• ";
color: #ccc;
}
第一个例子中，`.clearfix::after`创建一个空内容块级元素，清除父元素内部浮动元素的影响。第二个例子则在无序列表相邻`<li>`元素间插入点状符号作为分隔符。
2. 伪类的应用
(a) 交互反馈
css
.nav-item:hover {
background-color: #f5f5f5;
}
.nav-item:active {
background-color: #e0e0e0;
}
上述代码分别定义了`.nav-item`元素在鼠标悬停和激活（点击）时的背景色变化，提升了导航菜单的用户体验。
(b) 表单验证状态
css
input:required::before {
content: "*";
color: red;
margin-right: 0.5em;
}
input:invalid {
border-color: red;
}
第一个规则为必填输入框前添加红色星号提示；第二个规则在输入无效时改变输入框边框颜色，直观反映表单验证状态。
(c) 列表项计数与样式
css
ol li {
counter-increment: list-item;
}
ol li::before {
content: counter(list-item)". ";
}
ul.list > li:nth-child(odd) {
background-color: #f9f9f9;
}
第一部分使用`counter-increment`和`::before`为有序列表自动添加序号；第二部分则为无序列表奇数项设置浅灰色背景，实现交替行效果。
伪元素与伪类作为CSS的强大武器，能让我们在不修改HTML结构的前提下，灵活地为网页添加丰富的视觉效果与交互反馈。理解两者的核心差异，并熟练掌握各自的应用场景，是每位前端开发者进阶之路的必备技能。希望本文对您深入理解与运用伪元素与伪类有所助益，助力您的Web项目更具表现力与用户体验。
击右上方红色按钮关注“web秀”，让你真正秀起来
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。
先说一说为什么css要引入伪元素和伪类，以下是w3c的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：
<ul> <li>我是第一个</li> <li>我是第二个</li> </ul>
如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：
如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。
下面是另一个简单的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：
如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。
对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下：
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。
这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：
某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。
想了解更多CSS选择器，请点击：CSS选择器如此之多，你了解多少？
喜欢小编的点击关注，了解更多知识！
们先来看个例子：
在这个网页中，同时在一个页面中展示了三个网站：千锋教育官网、千锋教育HTML5大前端官网、千锋教育HTML5大前端好程序员官网。这是如何做到的呢？
其实也不难，使用 iframe 就可以实现了。 iframe的作用 是，用来在一个网页中显示另一个网页。
iframe 是个双标签，基本语法为：尖角号iframe，尖角号 /iframe。
iframe 标签有五个基本属性：
src 属性，资源的意思，用以引入其他网站的页面，值是一个页面路径。
width 属性，宽度的意思，用以控制引入页面的宽度，值是一个数字。
height 属性，高度的意思，用以控制引入页面的高度，值是一个数字。
frameborder 属性，框架边框的意思，默认引入的框架带有边框，通常情况下将该属性值设置为0，来取消框架的边框。
scrolling[ˈskrəʊlɪŋ] 属性，滚动的意思，用来控制是否显示框架的滚动条，值有三个：
auto，在需要的情况下出现滚动条，也是默认值。
yes，始终显示滚动条。
no，从不显示滚动条。
我们来做个例子。
打开编辑器，新建一个 iframe-demo.html 文件，补全基础代码，在 body 里添加 iframe 标签，首先定义 src 属性，值为 http://www.qfedu.com，frameborder 属性的值设置为1，显示边框。保存页面。
在浏览器中打开页面。千锋教育的官网在 iframe 的默认大小的窗口里显示了。
返回编辑器，给 iframe 定义属性 width 等 800，height 等于 600，保存。
回到浏览器，刷新，iframe 的窗口变大了。可以通过滚动条查看网站内容。
返回编辑器，如果给iframe 定义一个scrolling 属性，值为 no 的话，滚动条就不见了。
回到浏览器，刷新。此时就不能查看窗口隐藏的内容了。
iframe 也可以作为一个链接的目标框架。链接的 target 属性必须设置为 iframe 的 name 属性。
比如给 iframe 定义 name 属性的值为 iframe_a，链接 a 的 target 属性值也设置为 iframe_a。这样，当点击链接时，千锋教育的官网就在这个 iframe 窗口里打开了。
<iframe name="iframe_a">
<a href="http://www.qfedu.com/" target="iframe_a">千锋教育</a>
我们再来看个例子，当点击三个链接，iframe 里显示了相应链接的网站。
我们来实现这个例子。
回到编辑器，创建一个 iframe-example.html 文件，补全基本代码，在 body 里添加一个 div 容器，在容器里添加一个 iframe，定义属性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。
在浏览器中打开页面，一个 iframe 框架做好了。
回到编辑器，在 body 里的第一行再添加一个 div 容器，在容器里书写 emmet 命令：a 中括号 href 空格 target 等于 iframe_a 大于号 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 键自动补全代码。很明显，这不是我们要的代码。
这怎么办呢？聪明的你一定想到了，在小学数学里，通过添加小括号来设置运算优先级的法则。
我们在 a 的前面，b 的后面填上一对括号， (a[href target=iframe_a]>b)*3 我们把这个 emmet 放到注释里保存一下。
将光标移至 emmet 语句的结尾，按下 tab。期望的代码生成了。
如果你是完美主义者，这个代码你也不满意，能不能换行显示三个 a 标签呢？大家跟我一起做：
点击 VSCode 左下角的齿轮图标，再点击设置，打开设置窗口。
点击扩展菜单，再点击 emmet，找到 Syntax(森太课思) Profiles，在 settings（赛ten 思）.json 中编辑。
在这里输入 html 冒号 大括号，在大括号里写入 inline_break 冒号 2，表示标签数大于 两 组，就折行显示。
"html": {
"inline_break": 2
},
关闭设置。
把刚才保存的 emmet 命令再拷贝过来，按下 tab 键，完美的代码生成了！
给三个a 标签填好链接地址和文本内容。
这里需要注意，a 链接的地址可以是互联网的网站地址，也可以是你自己制作的本地页面地址，这些页面都可以在 iframe 中显示。
我们发现三个链接的target属性都指向了同一个iframe。保存一下页面。
回到浏览器，刷新。分别点击三个链接，iframe 里分别显示了三个网站的页面。
文章配套视频链接「链接」
*请认真填写需求信息，我们会在24小时内与您取得联系。
