伪类和伪元素，单冒号和双冒号的区别

最新推荐文章于 2024-08-12 12:31:02 发布
最新推荐文章于 2024-08-12 12:31:02 发布
阅读量1.3k 收藏 3
点赞数
文章标签： 前端 ViewUI
原文链接：https://my.oschina.net/u/3971746/blog/3000017
版权
本文详细解析了CSS中伪类与伪元素的区别及应用，包括常见的伪类如:link、:hover、:active等，以及伪元素::before和::after的使用场景。伪类用于增强元素状态的选择，而伪元素则用于创建不在DOM中的额外内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

单冒号用于伪类的书写，双冒号用于伪元素的书写。伪类为了兼容旧有样式，:after和::after都是一样的作用。

伪类和伪元素的区别：伪元素是虚拟元素，有类似dom结构这样的功能，伪类是虚拟类名，有类似选择器这样的功能。

    伪类有 :link :hover :active :visited :focus :first-child。

    伪元素有 ::before ::after。

转载于:https://my.oschina.net/u/3971746/blog/3000017

chuangwopu3176
关注
::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
liuhao9999的博客
03-23 869
单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。 想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆.
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
祈澈菇凉
10-17 504
总结：双冒号(::)是较新的语法规范，建议在使用CSS3伪元素时使用双冒号，而单冒号(:)可以用于表示某些伪元素，但不再推荐使用。这只是一小部分常见的 CSS3 伪元素，CSS3 还引入了其他伪元素，如 ::nth-child、::last-child、::nth-of-type 等，用于选择特定的子元素或元素类型，并对其应用样式。::before 和 ::after 之外的伪元素还可以通过 content 属性生成内容，例如 ::marker 可用于自定义列表项标记的样式。
C++双冒号和单冒号的用法区别
Invoker's Tower
03-07 6924
一.单冒号（:） 1.用作位域标号     有些信息在存储时，并不需要占用一个完整的字节， 而只需占几个或一个二进制位。例如在存放一个开关量时，只有0和1 两种状态， 用一位二进位即可。为了节省存储空间，并使处理简便，C语言又提供了一种数据结构，称为“位域”或“位段”。所谓“位域”是把一个字节中的二进位划分为几个不同的区域，并说明每个区域的位数。每个域有一个域名，允许在程序中按域名进行操作。这
CSS中一个冒号: 和两个冒号:: 的区别是什么呢？
xiaoninixin的博客
08-25 1415
在CSS中，使用一个冒号和两个冒号之间有一些语法和约定上的区别。这涉及到伪元素（pseudo-elements）和伪类（pseudo-classes）的使用。
::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用?
qq_44945525的博客
05-13 1233
::before 和 :after中双冒号和单冒号的区别以及2个伪元素的作用::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用实例实例 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 作用 :before 和 :after 这两个伪元素
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
qq_31594665的博客
04-25 626
双冒号(::)和单冒号(:)都用于表示伪元素，双冒号(::)是较新的语法规范，建议在使用CSS3伪元素时使用双冒号，而单冒号(:)可以用于表示某些伪元素，但不再推荐使用。作用都是用于在元素的内容前后插入生成的内容，用于装饰、布局等目的。
CSS伪类和伪元素的区别详解
09-25
在CSS3中，为了更好地区分，伪类使用单个冒号（`:hover`），而伪元素使用双冒号（`::before`）。然而，出于兼容性的考虑，许多开发者仍然使用单冒号的形式。尽管如此，了解这一区别并在编写代码时遵循这一规范是有益...
CSS 伪类和伪元素
最新发布
weixin_44152104的博客
08-12 1296
伪类是选择器的一种，它用于选择处于特定状态的元素。比如当它们是这一类型的第一个元素时（:first-child），或者是当鼠标指针悬浮在元素上面的时候（:hover）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类是以开头为冒号的关键字：:first-child。
浅谈CSS伪类与伪元素
09-25
不过，在实际应用中，单冒号和双冒号的写法都是被接受的，并且它们的作用相同，仅仅是书写格式的区别。例如，:before与::before在功能上是等价的。 在使用伪元素时，开发者需要注意的是，伪元素并不是真正的DOM元素...
关于伪类选择器中一个冒号和两个冒号的区别
weixin_30765475的博客
03-29 417
只要兼容现代浏览器如webkit、firefox、opera等浏览器，对于伪元素采用双冒号的写法，要是非要兼容IE浏览器，用CSS2的单冒号写法比较安全。 首先，阅读w3c对两者的定义： CSS伪类用于向某些选择器添加特殊的效果。 CSS伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是...
c++ 双冒号和单冒号的区别
天行九歌
03-28 747
双冒号 域操作符 声明了一个类A，在类A中声明一个成员函数void foo()，但没有在类A的声明中给出函数foo的定义，那么在类外定义foo时，就要写成下面这样，表示foo()函数是类A的成员函数。 void A::foo() 引用成员函数和变量 System::Math::Sqrt() 单冒号 构造函数初始化列表 struct foo{ foo() ...
CSS3单冒号与双冒号的用法与区别
friend_ship的博客
03-20 2961
CSS3除了伪类，还支持访问伪元素。CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个冒号，如“::before”,"::after"等，还增加了一个新的伪元素“::selection”。 目前浏览器对::selection伪元素单支持并不完美，在IE浏览器中只有IE9以上版本才支持。 使用方式： ::selection { background: #F30; color: #FFF; } 为什么要使用双冒号？ 对于IE6～IE8浏览器，仅支持单冒号的表示方法，而现代浏览
“::before”和“:before”中的双冒号和单冒号的区别
weixin_30820077的博客
05-07 239
伪类 伪元素 css3为了区分伪类和伪元素两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安...
伪元素到底是一个还是两个冒号？
x1037490413的博客
09-11 1732
清楚一点： 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写
【QT】C++单冒号‘:’和双冒号‘::’的大白话讲解
weixin_44939430的博客
06-19 1198
在C++编程中，双冒号 () 和单冒号 () 是 各自有不同的用途。
html语言中的双冒号,css单冒号和双冒号用法和区别
weixin_42709044的博客
06-01 2150
最近突然被别人问起css单冒号和双冒号有什么区别，答曰：“不知道”。虽然还在填坑中，但作为一个跨过了初级的FEer,感觉着实汗颜，刚好今天下午在搜别的问题的时候，突然看到一个对比，嗯，我觉得写得还不错，暂时没有自己总结，所以先转了。1、伪类与伪元素CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪类的效果可以通过...
双冒号（::）和单冒号（:）在 C++ 中的含义和作用
qq_50635297的博客
04-08 7645
双冒号（::）和单冒号（:）在 C++ 中的含义和作用
CSS单冒号和双冒号的区别
东方雨林_Lin的博客
07-17 3790
不同的符号:( :)和（：:) 转载自https://tympanus.net/codrops/css_reference/after/ 您很可能会遇到（或者遇到过）:after使用一个冒号而不是两个冒号的符号。 在CSS1和CSS2中，伪元素被定义为以一个冒号（:)开头，就像伪类一样（例如:hover）。在CSS3中，为伪元素引入了双冒号（：:)，以便将它们与伪类区分开来。 ...
CSS伪类与伪元素的区别和应用场景解析
CSS3中引入了双冒号语法（::）来区分伪元素和伪类，而CSS2中二者都使用单个冒号（:）。尽管如此，在大多数现代浏览器中，单冒号语法对于伪元素同样有效，但在遵循标准的情况下，应当使用双冒号语法。 通过正确使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值