深入理解CSS伪元素

2023-02-20 20:42:02html-css014

深入理解CSS伪元素,第1张

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

:first-letter

指定一个元素第一个字母的样式

注意1：所有前导标点符号应与第一个字母一同应用该样式

注意2：只能与块级元素关联

注意3：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因

:first-line

设置元素中第一行文本的样式

注意1：只能与块级元素关联

注意2：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因

:before(IE7-浏览器不支持)

在元素内容的最开始插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1：firefox浏览器需要添加-moz-前缀

注意2：只支持双冒号写法

注意3：只支持颜色和背景颜色两个样式

下面是伪元素的速查表

【content属性】

content属性应用于before和after伪元素

【1】 <string>里面的内容会原样显示，即使包含某种标记也不例外。

注意1：如果希望生成内容中有一个换行，则需要使用\A

注意2：若是一个很长的串，需要它拆分成多行则需要用\对换行符转义

【2】 <uri>

【3】attr( <identifier>)

<补充>【quotes属性】

管理引号

【4】open-quote|close-quote

【5】counter

首字下沉

钉子效果

图片叠加效果

css的伪类和伪元素在我们平常的工作中有着很广泛的应用，比如:hover、:active、:after等等，但是大部分人可能并不清楚伪类和伪元素的具体区别，所以我们今天来简单的梳理一下。 css伪类的定义由于css2.1中伪类和伪元素的定位并无区别，所以我们直接引用css3中对于伪类的定义（引入来源w3c）定义：引入伪类概念是用于选择不存在于DOM树中的信息或那些不能够通过常规css选择器得到的信息。（比如:hover,:active就属于不在于dom中的信息，nth-child()属于不能够通过常规css选择器得到的信息）伪类由“冒号”（:）+伪类的名称和伪类括号内的可选参数组成。（伪类括号内的可选参数指:nth-child(n)里的n）所有的常规选择器都可以在任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的，另一些伪类可以同时应用于同一个元素。为了满足用户在操作DOM时产生的DOM结构改变，伪类可以是动态的。 css伪元素的定义定义：伪元素用于创建和访问文档中不存在的抽象元素。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。使用伪元素可以访问到这些。伪元素还可以让我们访问文档中原本不存在的抽象元素（例如，::before和::after）。伪元素由两个冒号（::）后跟伪元素的名称组成。 ::两个冒号这种格式，是为了区别伪类和伪元素。与现有样式表的兼容性，考虑到兼容性有部分伪元素可以同时使用1个或者2个冒号，（即:first-line，:first-letter，:before和:after）。对于css3中引入的新伪元素，则必须要使用2个冒号。每个选择器只能出现一个伪元素，并且伪元素要位于选择器的后面。注意：此规范的未来版本可能允许每个选择器使用多个伪元素。 css伪类和伪元素的区别伪类和伪元素的语法结构不同，伪类为冒号（:）加伪类名称，伪元素为两个冒号（::）加伪元素名称，不过为了考虑兼容性(css2.1中伪类和伪元素都是一个冒号)，部分伪元素也支持一个冒号的写法，例如（:after,:before,:first-line,:first-letter）。一个选择器只能使用一个伪元素，但是可以使用多个伪类。伪类和伪元素的优先级不同，大部分伪类为0-1-0，伪元素则为0-0-1。参考 css选择器的优先级 https://www.chentugen.com/archives/12/

伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢?就是假的。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。

定义

伪类：

CSS3给出的定义是：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

通过上面的概念我们知道了伪类的功能有两种：

1.格式化DOM树以外的信息。比如：标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：

CSS3给出的定义如下：

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

大致翻译过来的意思就是：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

伪类和伪元素的区别(CSS3下的区别)

通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：

1、伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。

HTML:

CSS:

浏览器：

查看元素面板：

2、而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

HTML:

CSS:

浏览器：

查看元素面板：