css伪元素选择器有哪些（css 伪选择器）

编程日记 • 2026-03-15 14:06 • 阅读 4

伪素类似于伪类，但是它不匹配特定状态的素，而是匹配在文档中没有直接对应HTML素的特定部分。伪素选择器可能只匹配素的一部分，甚至向HTML标记中未定义的地方插入内容。

伪素选择器以::开头，其优先级和素选择器相同为(0,0,1)

::before创建一个伪素，使其成为匹配素的第一个子素。该素默认是行内素，可用于插入文字，图片或其他形状。必须指定content属性才能让素出现。

::after创建一个伪素，使其成为匹配素的最后一个子素。该素默认是行内素，可用于插入文字，图片或其他形状。必须指定content属性才能让素出现。

举例:

效果:

常用::after来添加三角效果。或清除浮动作用。

::first-letter用于指定匹配素的第一个文本字符的样式。

::first-line用于指定匹配素的第一行文本的样式。

举例：

效果：

之前的选择器都是根据素的名称或层次来选择页面中的素。但是在页面中素的属性也是一个重要的组成部分。为此CSS也提供了根据属性来选择素的选择器。

E[attr]表示选择具有attr属性的E素。

E[attr=value]表示选择具有attr属性，且属性值为value的E素。

E[attr^=value]表示选择具有attr属性，且属性值以value开头的E素。

E[attr$=value]表示选择具有attr属性，且属性值以value结尾的E素。

E[attr*=value]表示选择具有attr属性，且属性值包含value的E素。

E[attr~=value]表示选择具有attr属性，且属性值为空格分隔的列表，列表中包含value的E素。

E[attr|=value]表示选择具有attr属性，且属性值以value开头，或者以value-开头的E素。

在上述属性选择器的value后面添加i，表示在选择属性时不考虑大小写字母的影响。

举例：

效果：

今天的文章 css伪素选择器有哪些（css 伪选择器）分享到此就结束了，感谢您的阅读。