关于伪类选择器中一个冒号和两个冒号的区别

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下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等。

那么问题来了,什么是伪类?什么是伪元素?

首先,阅读 w3c 对两者的定义:

  • CSS 伪类用于向某些选择器添加特殊的效果。
  • CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

伪元素种类

我个人是这样理解的,伪类偏向于元素的动作行为,伪元素偏向于元素的属性。实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。

  有的网站建议说,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。

时间: 2024-08-25 03:04:09

关于伪类选择器中一个冒号和两个冒号的区别的相关文章

路径中一个点与两个点的区别

在导入js或者样式表的时候,如果我们放在文件夹下面,有时会涉及路径问题找不到我们的引入,曾经我也遇到过相应的问题.解决方法就是在路径前面加点.那么在这个路径中一个点和两个点到底有什么区别呢? 1.一个点:表示当前目录.即类似使用:./juqery.min.js. 2.两个点:表示当前目录的上级目录.类似:<script type="text/javascript" src="../jquery.easyui.min.js"></script>

CSS伪类选择器的一个小知识点

li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素,可以使代码更精简,多看一下. display:table-cell实现垂直居中挺好用的,看别人的文章

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚

标准文档流以及伪类选择器

标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.) 行级加float,就会脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,display就没有

标准文档流 伪类选择器

                                                 标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.)

12.伪类选择器与伪元素的应用

在之前的文章中我们已经了解过选择器的使用, 如果想对同一个元素在不同的状态时,展示不同的效果,则需要使用到今天要讲的伪类选择器 A. 伪类选择器: 是一个以冒号作为前缀,被添加到一个选择器的末尾的关键字; 依据使用的方式,可以分为如下三种类型: a. 状态类伪类选择器: :checked;  当表单元素被选中时的样式; :hover;  当鼠标在元素上时的样式; :active; 当元素被时的样式; (一般为按下鼠标未松开时的状态) :focus; 当按TAB使某个元素获得焦点时的样式;(现在一

CSS3中的伪类选择器详解

  类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择 最常见的伪类选择器 未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器 我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000

利用jQuery.expr创建一个自己的伪类选择器

话说好久没来园子写博客了,哎,看来懒癌已经到晚期,得治... 进入正题.前段时间看到一段jQuery代码,代码里面用到了jQuery.expr这个对象.完全陌生又木有.翻了下jQuery的官方文档,没找到关于这个对象的解释,不过搜寻了一番过后终于在jQuery的选择器引擎——sizzle的文档里找到了线索.如果没猜错的话,这个对象应该是Sizzle.selectors对象的扩展.其实要验证这一点非常简单,我们把两个对象分别console.log出来对比下就知道了.页面引入jQuery和sizzl

CSS3的一个伪类选择器

CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+. 描述: 伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明. 第一种:简单数字序号写法 :nth-child(number)