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

科技前沿 • 2025-06-02 15:40 • 阅读 37

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

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

伪元素选择器以::开头，其优先级和元素选择器相同为(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，表示在选择属性时不考虑大小写字母的影响。

举例：

讯享网

效果：