伪类用于选择元素的特殊状态或位置，如:hover、:focus、:first-child等，以单冒号定义；伪元素用于创建不存在于DOM中的虚拟结构，如::before、::after、::first-letter，推荐用双冒号表示。两者语法和用途不同，伪类匹配状态，伪元素生成装饰性内容，掌握它们可提升CSS表现力。
CSS中的伪类和伪元素是用于选择和样式化特定状态或结构部分的特殊选择器。它们看起来像类或元素，但实际上并不在HTML中存在，而是由CSS动态生成或匹配某些条件。理解它们的区别和用法，对掌握CSS至关重要。
伪类（Pseudo-classes）
伪类用于定义元素的特殊状态或位置。它以冒号 : 开头，常见于用户交互、元素在文档中的位置等场景。
常用伪类示例：:hover —— 鼠标悬停时触发，常用于按钮或链接的交互效果。 :focus —— 元素获得焦点时应用，如输入框被点击或Tab选中。 :active —— 元素被激活时（如鼠标按下），常用于按钮按下状态。 :visited —— 已访问过的链接，仅适用于 a 标签。 :first-child —— 匹配父元素下的第一个子元素。 :last-child —— 匹配父元素下的最后一个子元素。 :nth-child(n) —— 按位置选择第n个子元素，支持公式如 2n+1（奇数项）。 :not(selector) —— 排除符合指定选择器的元素。
例如，让列表中每一项鼠标悬停时背景变灰：
li:hover { background-color: #f0f0f0;}
又如，选中第一个段落：
立即学习“前端免费学习笔记（深入）”；
p:first-child { font-weight: bold;}
伪元素（Pseudo-elements）
伪元素用于创建不在DOM中实际存在的虚拟元素，通常用来装饰或插入内容。它使用双冒号 ::（也可用单冒号兼容旧浏览器），表示其“非真实元素”特性。
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 常见伪元素说明：::before —— 在元素内容前插入内容，常配合 content 属性使用。 ::after —— 在元素内容后插入内容，同样依赖 content。 ::first-line —— 选中块级元素的第一行文本。 ::first-letter —— 选中块级元素首字符，适合首字放大效果。 ::selection —— 定义用户选中文本时的高亮样式。
比如，为每个警告提示前加一个感叹号：
.warning::before { content: "⚠️ "; color: red;}
实现首字下沉效果：
p::first-letter { font-size: 2em; float: left; margin-right: 5px;}
修改选中文本的背景色：
::selection { background-color: yellow; color: black;}
伪类与伪元素的区别
核心区别在于用途和语法：
伪类描述的是状态或位置，如“悬停”、“第一个孩子”； 伪元素描述的是文档中不存在的结构部分，如“内容之前”、“首字母”； 语法上，伪元素推荐使用 ::，以区别于伪类的 :，尽管多数浏览器仍接受单冒号写法。
例如：a:hover 是伪类，表示链接的悬停状态；而 p::before 是伪元素，表示段落前插入的内容。
实用技巧与注意事项
使用 ::before 和 ::after 时，必须设置 content 属性，即使为空（如 content: "";）。 伪元素默认是 inline 元素，必要时可设为 display: block 或其他类型。 伪类可以链式使用，如 a:hover:focus 表示既悬停又聚焦的状态。 注意浏览器兼容性，尤其是 :nth-child 和 ::selection 在老版本IE中的支持情况。基本上就这些。掌握伪类和伪元素，能让你更灵活地控制页面表现，无需额外HTML标签也能实现丰富视觉效果。
以上就是css伪类与伪元素基础详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1059611.html
微信扫一扫 
支付宝扫一扫 
