css的伪元素样式,css伪元素的作用

css中什么是伪类和伪元素？

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

十载的乐安网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整乐安建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“乐安网站设计”,“乐安网站推广”以来，每个客户项目都认真落实执行。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

浅谈css伪类和伪元素的区别、优先级

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选择器的优先级

深入理解CSS伪元素

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由: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伪元素选择器有哪些

伪类：

:active，将样式添加到被激活的元素。

:focus，将样式添加到被选中的元素。

:hover，当鼠标悬浮在元素上方是，向元素添加样式。

:link，将特殊的样式添加到未被访问过的链接。

:visited，将特殊的样式添加到被访问的链接。

:first-child，将特殊的样式添加到元素的第一个子元素。

:lang，允许创作者来定义指定的元素中使用的语言。

伪元素：

:first-letter，将特殊的样式添加到文本的首字母。

:first-line，将特殊的样式添加到文本的首行。

:before，在某元素之前插入某些内容。

:after，在某元素之后插入某些内容。