关于css伪类,伪元素详解总结

伪类

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是:

:link , :visited , :hover , :active , :first-child 以及 :nth-child。

这里还有很多,接下来我们将要逐一进行介绍。此外,伪类前面总是加一个冒号(:)。之后跟着伪类的名字或者是括号里面的值,如:nth-child。

伪元素

关于伪元素,它们更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没有真正的指定伪元素,但是可以使用CSS进行创建。常见的几种伪元素是

::after , :before 以及 :first-letter。

在文章的最后我们将对他们进行详细的说明。

关于伪元素使用单冒号还是双冒号?

在大多数情况下,两者均可。

CSS3中引入双冒号(::)是为了在伪类中,如::hover,:active,区分伪元素,如::before,::after。除了IE8及其以下版本不支持外,所有的浏览器均支持伪元素中双冒号的使用。

一些伪元素,如::backdrop只接受双冒号的使用。

就我个人而言,我使用单冒号以便使我的CSS可以向后兼容一些旧浏览器。当然,在那些指定使用双冒号的伪元素上使用双冒号。

你可以自由的去选择使用,因为不存在对错之分。

然而在写这篇文章时,规范建议使用单冒号,理由如上所述,为了得到更好的向后兼容性

测试环境:xp ,ie7~8 chrome。

link 伪类 :(:link,:visited) 这个是链接专用

动态伪类 :(:hover,:active,:focus)

对于链接(a标记)不管是link伪类还是动态伪类,在ie7-8,chrome 都有效果

对于表单元素,

ie7 下不支持动态伪类,

ie8下文本框,单选框都支持:focus,

chrome下文本框支持:focus,复选框不支持focus

对于p,tr ,ie7-8,chrome 都只支持:hover。


常见的hover、active伪类顺序问题

下面是正确的顺序:

  1. a:link{}
  2. a:visited{}
  3. a:hover{}
  4. a:active{}

伪类与伪元素的看起来很像,有什么区别吗?

很多人把伪类、伪元素都当做“伪类”来说,实际上是有区别的。

伪类、伪元素,都是属于CSS选择器的范围。

简单的说:

伪类,如果我放弃伪类不用而 又想要伪类同样的效果,一般我可以为元素加一个class类,也能达到伪类选择器一样的效果。(如,:first-child伪类)

伪元素,如果我放弃伪元素不用而 又想到达伪元素同样的效果,我必须创建一个元素,才能达到伪元素的效果。(如,:first-line伪元素)


为什么有些写一个冒号,有的是两个冒号?

w3c的CSS3规范中规定:

:单冒号,用于伪类

::双冒号,用于伪元素

但是在css2规范中,伪元素的写法是:before——单冒号的形式。

伪类、伪元素的单冒号、双冒号写法问题

在CSS3规范中,伪类 与 伪元素,写法是规定的:

伪类写法:单冒号+伪类(如:last-child)

伪元素写法:双冒号+伪元素(如::first-line)

在CSS2规范中,伪类、伪元素都是使用单冒号+伪类或伪元素。

一般浏览器为了兼容CSS,两种都会支持,

但是早期的IE并没有支持到CSS3的双冒号写法,为了兼容,推荐使用单冒号的写法。

(从IE9开始支持双冒号伪元素写法。)

原文地址:https://www.cnblogs.com/both-eyes/p/10082276.html

时间: 12-07

关于css伪类,伪元素详解总结的相关文章

史上最全web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description></description> 8 9 <!--context-param元素声明应用范围内的初始化参数--> 10 <context-param&g

web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description></description> 8 9 <!--context-param元素声明应用范围内的初始化参数--> 10 <context-param>

【转】UML类图与类的关系详解

UML类图与类的关系详解   2011-04-21 来源:网络   在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为一般关联关系和聚合关系(Aggregation),合成关系(Composition).下面我们结合实例理解这些关系. 基本概念 类图(Class Diagram): 类图是面向对象系统建模中最常用和最重要的图,是定义其它图的基础.类

Android Environment类的接口详解

Android应用开发中,常使用Environment类去获取外部存储目录,在访问外部存储之前一定要先判断外部存储是否已经是可使用(已挂载&可使用)状态, 并且需要在AndroidManifest.xml文件中添加外部存储读和写的权限. Environment类中提供了几个静态常量用于标识外部存储的状态,这些状态都是String类型 MEDIA_BAD_REMOVAL 在没有挂载前存储媒体已经被移除. MEDIA_CHECKING 正在检查存储媒体. MEDIA_MOUNTED 存储媒体已经挂载

CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

伪类 伪元素 如何区分

前段时间在写网页的时候,使用了CSS的伪元素:after来实现样式,故而重温了一下伪类和伪元素.平时实现的时候便是拿出来用,但是真正区分两者的概念的时候却有点混淆了. 首先,查看一下W3S对伪类和伪元素的定义: 伪类:用于向某些选择器添加特殊效果. 伪元素:向某些选择器设置特殊效果. 对于我这种理解能力比较差的人来说,恕我直言,这两句话貌似……这是一个概念吧? 从这两个概念,我们可以知道:1.二者都与选择器有着密不可分的联系:2.“特殊”的效果…… 特殊在何处?他们与类.元素之间有什么关系呢?

[ jquery 子元素选择器 总结 ] 总结: 伪类子元素选择器

总结: 伪类中的子元素选择器: 第一种类型: :first-child :last-child :nth-child() :nth-last-child() 第二种类型: :only-child :only-of-type 第三种类型: :first-of-type :nth-last-of-type() :nth-of-type() 特点: 伪类选择器很有特点: 1.位置:可以直接通过伪类选择器直接获取开始 结束 和第几个,通常和目标元素在什么位置上有关,可以从正着数,也可以从倒着数,计数从

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

CSS position overflow float 属性 详解

position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不