css 伪元素选择器

特点

• 不在 DOM 中：伪元素不是实际的 DOM 元素，无法通过 JavaScript 直接访问或操作。它们仅存在于 CSS 渲染层，用于控制样式和布局
• 默认行内元素：伪元素默认为行内元素（display: inline），但可以通过设置 display 属性更改为其他类型，如块级元素、行内块元素等
• 继承性：伪元素会继承其关联元素的某些样式，如字体、颜色等
• 不适用不能包含子元素的元素：::before 和 ::after 伪元素仅适用于可以包含子元素的元素，如块级元素、行内块元素等。对于不可包含子元素的元素（如 <img>、<input> 等），伪元素不起作用
• 事件传递：伪元素（如 ::before 或 ::after）会触发关联的主元素的事件
  • 设置 pointer-events: none 属性。这会禁用伪元素的鼠标事件

选择器::before

• 对选择器选择的所有元素前面加内容，必须配合 content 属性联合使用
• 伪元素使用 position 定位后,设置 width 和 height 为 100% ，则伪元素的高宽将和主元素相同

content:"插入文本内容"；  // 无法解析标签
content:url(url);    	// 插入图片
content:attr(attr); 	// 会显示标签上属性对应的值

选择器::after

• 对选择器选择的所有元素后面加内容

选择所有伪元素

::before,::after{ 选择所有伪元素
}

:root

• html 的伪元素

:root{   // html的伪类
	// 样式	
	
	// 定义变量
		--x:值
		
	// 使用变量
		var(--x)
}

::first-line

• 伪元素用于向文本的首行添加特殊样式,及浏览器显示未换行的第一行文本内容
• 只能应用于块级元素

::first-letter

• 用于向文本的首字母、首文字添加特殊样式
• 只适用于块级元素

::section

• 鼠标选中的文本
• ::section 前面不添加内容表示全局生效