关于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

时间: 2024-10-08 23:13:46

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

CSS选择器:伪类(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类 伪类选择器分为两种. (1)静态伪类:只能用于超链接的

css伪类大全用法详解

CSS伪类及伪元素选择器,如超链接的a:link.a:visited.a:hover等等, 一.超链接 a:link{ color:red;} a:visited{ color:blue;} a:hover{ color:black;} a:active{ color:#6600CC;} 注意:设置的顺序不能变,遵循爱恨(love/hate)原则. ——此原则自己在网上看别人说的,便于记忆就写在这了 二.更多伪类 :root   ------------------------------ 文档

css中伪类/伪元素详解

一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after). 二.常用伪类 伪类 用法 兼容 :link 未访问的链接 主流浏览器都支持 :visited 已访问的链接 主流浏览器都支持 :hover 鼠标划过链接 主流浏览器都支持 :active 已选中的链接 主

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

第一章入门篇伪类伪对象

1.伪类 伪类用来指定HTML元素某个状态下的样式,格式 选择符:伪类{属性:属性值} <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>伪类</title> <style type ="text/css" > a:link{ text-decoration:none;font-size:50

史上最全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>

web.xml配置文件元素详解(转载)

今天看到一篇关于web.xml配置文件元素的博文,觉得很全面,这里引用过来,方便学习和查询. http://www.cnblogs.com/hafiz/p/5715523.html 一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description&g

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

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