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

系统管理员 2021-04-19 14:16 536阅读 0赞

### 伪类 ###

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用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开始支持双冒号伪元素写法。）

发表评论取消回复

表情：

评论列表（有 0 条评论，536人围观）

还没有评论，来说两句吧...

相关阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 35 阅读

相关【CSS】CSS 伪类和伪元素

目录 1. 什么是伪类和伪元素？ 1.1 伪类 1.2 伪元素 2. 伪

红太狼/ 2023年02月15日 15:54/ 0 赞/ 75 阅读

相关 CSS的伪类和伪元素

定义伪类: CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

电玩女神/ 2023年01月08日 14:29/ 0 赞/ 176 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 202 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 264 阅读

相关 css伪类与伪元素

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

电玩女神/ 2022年07月26日 00:06/ 0 赞/ 340 阅读

相关 CSS总结-------伪元素

CSS 伪元素是Pseudo-elements。作用是：向某些选择器设置特殊效果 1.伪元素介绍伪元素是创造关于文档语言能够指定的文档树之外的抽象。伪元

客官°小女子只卖身不卖艺/ 2022年06月07日 01:38/ 0 赞/ 268 阅读

相关 css伪元素详解

一.什么是伪元素； css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页

布满荆棘的人生/ 2022年05月14日 05:21/ 0 赞/ 277 阅读

相关 css伪类、伪元素选择器

`1.伪类选择器` 条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。 A.伪类的语法：（

忘是亡心i/ 2021年09月14日 00:14/ 0 赞/ 593 阅读

相关关于css伪类，伪元素详解总结

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

系统管理员/ 2021年04月19日 14:16/ 0 赞/ 537 阅读