伪类用于定义元素状态，如: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个子元素，适合实现隔行变色、布局控制等。
Word-As-Image for Semantic Typography
文字变形艺术字、文字变形象形字
62 查看详情 
区别说明：: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伪类与伪元素如何使用_常用伪类伪元素解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/952654.html
微信扫一扫 
支付宝扫一扫 
