CSS伪类与伪元素如何使用_常用伪类伪元素解析

伪类用于定义元素状态，如:hover、:focus、:not()；伪元素创建抽象内容，如::before、::after、::first-letter，提升样式灵活性与可访问性。

伪类和伪元素是CSS中非常实用的特性，它们帮助开发者在不改变HTML结构的前提下，为特定状态或内容片段添加样式。虽然名字相似，但两者用途和语法略有不同。下面详细介绍常用伪类与伪元素的使用方法。

:hover 伪类 —— 鼠标悬停时触发样式

当用户将鼠标指针移动到某个元素上时，:hover 会激活对应样式，常用于按钮、链接等交互元素。

a:hover { color: red; }
这会让链接在鼠标悬停时变为红色。

不仅限于链接，任何元素都可以使用 :hover，比如高亮整个卡片区域或显示隐藏内容。

:focus 伪类 —— 元素获得焦点时生效

当用户通过键盘Tab键或点击使表单元素（如 input、button）获得焦点时，:focus 被触发，有助于提升可访问性。

立即学习“前端免费学习笔记（深入）”；

input:focus { border-color: blue; outline: none; box-shadow: 0 0 5px blue; }

这样可以让用户清楚地看到当前正在操作的输入框。

::before 和 ::after 伪元素 —— 插入装饰性内容

这两个伪元素允许你在元素内容前或后插入生成的内容，常用于添加图标、引号、清除浮动等。

• 必须设置 content 属性，即使为空（content: ""）
• 默认为行内元素，可通过 display 修改
• 不能选中或复制生成的内容，仅用于视觉展示

p::before { content: "▶ "; color: gray; }
每个段落前都会出现一个灰色箭头符号。

:nth-child(n) 与 :nth-of-type(n) —— 精准定位子元素

用于选择父元素下的第n个子元素，适合实现隔行变色、布局控制等。

如此AI员工

国内首个全链路营销获客AI Agent

172

查看详情

• :nth-child(2) 选择的是父元素下的第二个子节点，不管类型
• :nth-of-type(2) 只计算同类型的元素，比如第二个 p 标签

tr:nth-child(even) { background: #f2f2f2; }
实现表格隔行着色。

::first-line 与 ::first-letter —— 文本排版利器

主要用于段落的首行或首字母样式设计，常见于文章页面。

p::first-letter { font-size: 2em; float: left; margin-right: 5px; }
实现首字母下沉效果。

p::first-line { font-weight: bold; }
让段落首行加粗。

这些伪元素只能应用于块级元素，且仅对第一个格式化行或字母起作用。

:not() 伪类 —— 排除特定元素

选择不符合指定条件的元素，增强选择器灵活性。

div:not(.special) { opacity: 0.8; }
所有不包含 class="special" 的 div 都会应用半透明效果。

支持多种参数，如标签名、属性选择器等，提高筛选精度。

总结：伪类 vs 伪元素

伪类以单冒号表示（如 :hover），描述元素的特殊状态；伪元素使用双冒号（如 ::before），代表文档中不存在的抽象元素。

CSS3规范推荐伪元素使用双冒号以区分伪类，但为了兼容旧浏览器，单冒号仍被广泛接受。

合理使用这些特性，能减少冗余HTML标签，让代码更简洁，样式更动态。

以上就是CSS伪类与伪元素如何使用_常用伪类伪元素解析的详细内容，更多请关注php中文网其它相关文章！