CSS3实例解析:伪类前的冒号和两个冒号的区别

网页制作Webjx文章简介:在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别?

在一次项目中,有一次要用到::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的单冒号写法比较安全。

时间: 2025-01-07 02:29:32

CSS3实例解析:伪类前的冒号和两个冒号的区别的相关文章

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

核心提示:在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别? 在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别? 这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素. W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of

利用CSS3的checked伪类实现OL的隐藏显示

网页制作Webjx文章简介:纯CSS打造可折叠树状菜单. 随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个用CSS3打造的可折叠树状菜单. 直接上图: 树状菜单相信大家都不会陌生,我们一般用css+JS 的方式来实现.而css3的到来,让我们摆脱JS的束缚,直接运用CSS3的"选择器"就能实现可折叠树状菜单. 整体的代码很多,就不逐句逐

JS类定义原型方法的两种实现的区别评论很多_js面向对象

我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?     JScript Class:  复制代码 代码如下:  function JSClass()   {        }      Extends prototype method:  复制代码 代码如下:  JSClass.prototype.MethodA = function()   {   };      Or   复制代码 代码如下: fu

图解css3:核心技术与案例实战. 2.8 结构伪类选择器

2.8 结构伪类选择器 伪类可以将一段并不存在的HTML当作独立元素来定位,或是找到无法使用其他简单选择器就能定位到的切实存在的元素.因此CSS3给伪类选择器引入一种"结构伪类选择器".这种选择器可以根据元素在文档树中的某些特性(如相对位置)定位到它们.也就是说,通过文档树结构的相互关系来匹配特定的元素,从而减少HTML文档对ID或类名的定义,帮助你保持代码干净和整洁. 2.8.1 重温HTML的DOM树 所有的结构伪类都是基于HTML文档树的,也称做文档对象模型(DOM),下面简单回

CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个"#"字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的. 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式. 浏览器支持 因为我们在讨论CSS3,所以它现在被除了I

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的: 一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态. 需求: 没有文字,没有聚焦--点赞 没有文字,聚焦--灰色发送 有文字--红色发送 如果用JS实现,需要监听输入框的change和focus事件,比较麻烦.但是用CSS中的伪类就可以实现相近效果. <input type="text" class="input" required>    <div c

谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

:before和:after伪类元素创造神奇效果

文章简介:伪类元素之美. 通过使用:before和:after,你能创作出让人称奇的视觉效果.对页面中的每个元素,你都有两个额外的可以控制的元素,本来这些是需要额外的元素来实现.他们给设计带来了更多的趣味性的空间,而不是增加无语义的有负面影响的标签.这里给大家整理了一堆让人称奇的东西.让我们开始吧! 给了你多层背景画布 因为你可以相对于他们的父元素绝对定位伪类元素,你可以把他们想象他们是每个元素的两个额外层.Nicolas Gallagher shows us 给我们展示了很多这种应用,包括多层

图解css3:核心技术与案例实战. 2.4 动态伪类选择器

2.4 动态伪类选择器 伪类选择器对于大家来说最熟悉的莫过于":link".":visited".":hover".":active",因为这些是大家平时常用到的伪类选择器.而CSS3的伪类选择器可以分成六种:动态伪类选择器.目标伪类选择器.语言伪类选择器.UI状态伪类选择器.结构伪类选择器和否定伪类选择器. 伪类选择器语法书写时和其他的CSS选择器写法有所区别,都以冒号(:)开头.例如: E:pseudo-class {pr