伪类表示选择器的状态，如:hover、:active、:last-child等。它们以一个冒号（:)开头。
CSS伪类的语法如下 -
:pseudo-class{
attribute: /*value*/
}同样，伪元素用于选择虚拟元素，如::after、::before、::first-line等。
这些以双冒号(::)开头。
CSS伪元素的语法如下 -
立即学习“前端免费学习笔记（深入）”；
::pseudo-element{
attribute: /*value*/
}以下示例说明了 CSS 伪类和伪元素属性。
现场演示
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
padding: 3%;
font-size:1.4em;
color: tomato;
background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>这将产生以下结果 -
现场演示
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: " BOOM!";
background: hotpink;
}
p:last-child {
font-size: 1.4em;
color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>这将产生以下结果 -
以上就是CSS中伪类和伪元素的区别的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
360
收藏
