CSS中一个冒号和两个冒号有什么区别

深藏阁楼爱情的钟 2023-06-03 12:58 12阅读 0赞

在一次写代码的过程中，有一次要用到::selection伪元素，然后我就想CSS中一个冒号和两个冒号有神马区别？

简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

W3C关于CSS3选择器的规范中有一段描述：

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

简单翻译一下，大意就是，伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

转载于:https://www.cnblogs.com/danruoyanyun/p/11346515.html

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Linux教程：vim冒号模式中:x和:wq有什么区别？

在 Vim 编辑器中，`:x` 和 `:wq` 是两个不同的命令，它们有以下区别： 1. `:x` 命令：`:x` 命令用于保存文件并退出 Vim 编辑器。如果文件已经有修

落日映苍穹つ/ 2024年02月19日 08:16/ 0 赞/ 35 阅读

相关 ::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after

小灰灰/ 2023年08月17日 15:54/ 0 赞/ 130 阅读

相关 CSS中一个冒号和两个冒号有什么区别

在一次写代码的过程中，有一次要用到::selection伪元素，然后我就想CSS中一个冒号和两个冒号有神马区别？　简而言之：单冒号(:)用于CSS3伪类，双冒号(:

深藏阁楼爱情的钟/ 2023年06月03日 12:58/ 0 赞/ 13 阅读

相关 Python中两个冒号详细解释

> 考试是很好的检测自己的办法。否则自己对自己总有那么一点暧昧。双冒号把列表分成三个数，【起点：终点：跨度】如【2:9:3】代表：从下标为2开始，每次加3，下标最大为8。

港控/mmm°/ 2022年12月10日 14:52/ 0 赞/ 237 阅读

相关 HTML：::before和::after伪元素的用法（两个冒号和一个冒号的区别）面试常考哦！！！

很多面试官都会问2个冒号和1个冒号的区别直接回答： 2个冒号是伪元素，1个冒号是伪类 ::before和::after必须配合content属性来使用，content必

短命女/ 2022年11月29日 11:26/ 0 赞/ 147 阅读

相关 CSS3:伪类前的冒号和两个冒号区别

[CSS3:伪类前的冒号和两个冒号区别][CSS3] 冒号和两个冒号是区别css中的伪类与伪元素。 [CSS3]: http://www.php100.co

墨蓝/ 2022年09月24日 05:15/ 0 赞/ 154 阅读

相关 c++中冒号（:）和双冒号（::）的用法

转载于：http://fengqing888.blog.163.com/blog/static/3301141620100623933512/ 1.冒号（:）用法

雨点打透心脏的1/2处/ 2022年09月18日 04:40/ 0 赞/ 180 阅读

相关 JavaScript中冒号(:)

在JavaScript中，我们常见的使用冒号(:)的情况有：对象表达法冒号在这里用来分割对象的属性和属性值。 script language="ja

旧城等待，/ 2022年08月26日 14:09/ 0 赞/ 211 阅读

相关 c++中冒号（:）和双冒号（::）的用法

1.冒号（:）用法（1）表示机构内位域的定义（即该变量占几个bit空间） typedef struct \_XXX\{ unsigned cha

╰+哭是因爲堅強的太久メ/ 2022年07月16日 13:11/ 0 赞/ 233 阅读

相关 CSS 伪类选择器中的: 和 ::(冒号区别)

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的，所以两者到底有什么区别呢，我们先来看下W3C关于CSS3选择器的规范中有一段描述： A ps

- 日理万妓/ 2021年09月19日 01:36/ 0 赞/ 402 阅读