CSS中单冒号和双冒号分别表示什么,怎样用的
Admin 2022-08-24 群英技术资讯 503 次浏览
在一次项目中,有一次要用到::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的单冒号写法比较安全。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
最近翻阅网上资料,查到了一些自己从未用过的CSS,于是记录下来,在有些时候兴许能用得上。1、CSS中简单的运算我们通常用css指定的是静态的结果,而动态结果,如高度,位置等等则需要js来动态进行计算赋值,而其实css自己也能够进行简单的运算,主要是用到了calc这个函数。.div{width:calc(100%-50px);}2、使用CSS实现文字 ...
chrome最小字体限制的问题如何解决?一些朋友可能知道Chrome 默认最小字体是12px,这样的设计也是出于为了更好显示中文,但是这样的设计也有一个坏处,就是可能会出现某些上标、下标字体过大的情况,这对于用户体验并不好,那么我们有没有什么解决方法呢?接下来给大家分享两种方法,感兴趣的朋友可以了解看看。
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异,非常具有实用价值,需要的朋友可以参考下
本文给大家分享float和margin结合使用实现各种布局的内容,下文有具体的实现多种布局的代码供大家参考,对新手学习CSS布局有一定的帮助,需要的朋友可以了解看看,接下来我们一起来学习一下吧。
在开发中,很多需求需要我们对元素居中,例如文本居中,多行文本居中,块级元素水平居中、垂直居中等,那么这些要如何实现呢?下面是一些css实现元素居中的方法,有需要的朋友可以参考一下。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008