CSS中伪类和伪元素的区别-css教程-PHP中文网

首页

web前端

css教程

CSS中伪类和伪元素的区别

PHPz

Aug 27, 2023 am 09:33 AM

伪类

伪类表示选择器的状态，如: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&#39;re somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

输出

这将产生以下结果 -

CSS中伪类和伪元素的区别

示例

现场演示

<!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中伪类和伪元素的区别

以上是CSS中伪类和伪元素的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

@rules具有多少特异性，例如@keyframes和@media？Apr 18, 2025 am 11:34 AM

前几天我得到了这个问题。我的第一个想法是：奇怪的问题！特异性是关于选择者的，而在符号不是选择器，那么...无关紧要？

您可以嵌套@Media和@support查询吗？Apr 18, 2025 am 11:32 AM

是的，您可以，而且它并不重要。不需要CSS预处理器。它在常规CSS中起作用。

快速吞噬缓存破坏Apr 18, 2025 am 11:23 AM

您应该肯定会在CSS和JavaScript（以及图像和字体以及其他内容）等资产上设置遥远的高速缓存标头。告诉浏览器

寻找可以监视CSS质量和复杂性的堆栈Apr 18, 2025 am 11:22 AM

许多开发人员写了如何维护CSS代码库的文章，但并没有很多关于如何测量该代码库质量的文章。当然，我们有

数据学家用于建议不执行值的值Apr 18, 2025 am 11:08 AM

您是否曾经有一种需要接受简短而任意的文本的表格？喜欢名字或其他。那完全是用的。有很多

苏黎世的最初会议Apr 18, 2025 am 11:03 AM

我很高兴能前往瑞士苏黎世参加前界（Love the Name and URL！）。我以前从未去过瑞士，所以我很兴奋

使用CloudFlare工人建立全栈无服务器应用程序Apr 18, 2025 am 10:58 AM

我在软件开发方面最喜欢的发展之一是无服务器的出现。作为一个倾向于陷入细节的开发人员

在NUXT应用程序中创建动态路由Apr 18, 2025 am 10:53 AM

在这篇文章中，我们将使用我构建和部署的电子商务商店演示来进行Netlify，以展示如何为传入数据制作动态路线。这是一个公平的

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中