css伪类选择器用法（css中伪类和伪元素选择器）

科技前沿 • 2025-06-10 07:14 • 阅读 30

大家好，我是讯享网，很高兴认识大家。

1.伪类和伪元素的引入

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

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

2.伪类和伪元素的概念

2.1 伪类：

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

例如，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

2.2 伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。

例如，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

3.伪类列举

3.1 状态伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式就会失去。状态伪类的顺序很重要，顺序错误可能会导致没有效果。通常的建议是LVFHA，即—–link，visited，focus，hover，active。

3.2 结构化伪类

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

3.3 表单相关

3.4 语言相关

3.5 其他

！！注意，伪类的名称不区分大小写。

讯享网

4 伪元素列举

4.1 单双冒号

4.1 仅双冒号

5. :first-child和:first-of-type的区别

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：

p:first-child: 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child: 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child: 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； :first-child: 匹配到的是p元素,因为在这里div的第一个子元素就是p。

然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码：

p:first-of-type: 匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素； h1:first-of-type: 匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素； span:first-of-type: 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。 :first-of-type: 匹配到的是p元素

所以，通过以上两个例子可以得出结论：

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。