CSS中的伪类和伪元素

原文链接 https://blog.csdn.net/m0_52083530/article/details/122628780

一、引入伪类跟伪元素的原因？

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述

比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，因此引入。

?

1 2 3 4 5

引用标准中的话：   (CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。) CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

　　

二、什么是伪类，伪元素？

1、伪类
概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2、伪元素
概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
三、伪类
分类

状态伪类
结构性伪类
1、状态伪类：基于元素当前状态进行选择的
元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

?

1 2 3 4 5 6 7 8 9 10 11

常见的状态伪类   :link 应用于未被访问过的链接；   :hover 应用于鼠标悬停到的元素；   :active 应用于被激活的元素；   :visited 应用于被访问过的链接，与:link互斥。   :focus 应用于拥有键盘输入焦点的元素。

　　

2、结构性伪类：css3新增选择器
利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

常见的结构性伪类   :first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型； :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型； :nth-of-type() 规定属于其父元素的第n个 指定 元素； :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素； :first-of-type 选择一个上级元素下的第一个同类子元素； :last-of-type 选择一个上级元素的最后一个同类子元素； :only-child 选择它的父元素的唯一一个子元素； :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素； :checked匹配被选中的input元素，这个input元素包括radio和checkbox。 :empty 选择的元素里面没有任何内容。 :disabled匹配禁用的表单元素。 :enabled匹配没有设置disabled属性的表单元素。 :valid匹配条件验证正确的表单元素。 :in-range选择具有指定范围内的值的 <input> 元素。 :optional选择不带 "required" 属性的 <input> 元素。 :focus选择获得焦点的 <input> 元素。

　　

四、伪元素
所有的伪元素

选择器 例子 例子描述

?

1 2 3 4 5

::after p::after 在每个 <p> 元素之后插入内容。 ::before p::before 在每个 <p> 元素之前插入内容。 ::first-letter p::first-letter 选择每个 <p> 元素的首字母。 ::first-line p::first-line 选择每个 <p> 元素的首行。 ::selection p::selection 选择用户选择的元素部分。

　　

注意：

CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

在这里要对::before和::after,做个讲解

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）

默认值： normal
继承： no
版本： CSS2
JavaScript 语法： object.style.content="url(beep.wav)"

?

1 2 3 4 5 6 7 8 9 10 11 12 13

contnt属性的类别：   none 设置 content 为空值。 normal 在 :before 和 :after 伪类元素中会被视为 none，即也是空值。 counter 设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字） attr(attribute) 将元素的 attribute 属性以字符串形式返回。。 string 设置文本内容 open-quote 设置前引号 close-quote 设置后引号 no-open-quote 移除内容的开始引号 no-close-quote 移除内容的闭合引号 url(url) 设置某种媒体（图像，声音，视频等内容）的链接地址 inherit 指定的 content 属性的值，应该从父元素继承