文章目录
- 一、 伪类（Pseudo-classes）
- 1.链接伪类
- 2.用户行为伪类
- 3.结构伪类选择器
- 4.表单伪类
- 二、伪元素（Pseudo-elements）
- 三、核心区别
一、 伪类（Pseudo-classes）
伪类用于选择处于特定状态的元素，例如用户交互或文档结构中的位置。它们以冒号（:）开头。
1.链接伪类
a:link：为访问链接的默认样式。a:visited：已访问链接的样式。a:hover：鼠标悬停在链接上时的反馈。a:active：连接被点击时的瞬时状态。
代码示例：
/* 未访问链接的默认样式 */a:link{color:blue;text-decoration:none;}/* 已访问链接的样式 */a:visited{color:purple;}/* 鼠标悬停时的反馈 */a:hover{color:red;text-decoration:underline;}/* 点击瞬间的状态 */a:active{color:green;}2.用户行为伪类
:hover：鼠标经过元素。:focus：获得焦点的元素（表单）当用户点击或通过键盘（如Tab键）导航到元素时触发。
<!DOCTYPEhtml><html><head><style>input:focus{border:2px solid #ff6b6b;background-color:#fff5f5;}button:focus{outline:3px dashed #20bf6b;}</style></head><body><inputtype="text"placeholder="点击获取焦点"><button>测试按钮</button></body></html>3.结构伪类选择器
:first-child：一组兄弟元素中的第一个元素。:last-child：一组兄弟元素中的最后一个元素。:nth-child(n)：一组兄弟元素列表中第n个元素。
n 的取值可以是：
1.数字。从1开始
2.关键字。odd 奇数 even 偶数
3.公式。
:nth-child(3n) ； 3的倍数，第3.6.9…个元素:nth-child(3n)
:nth-child(n+2)；第2个以及以后的元素
:nth-child(-n+3)；前面3个元素
注意公式的n取值从0开始计算
<style>table{width:500px;height:300px;border-collapse:collapse;text-align:center;background:#ccc;}table tr:first-child{background-color:#7ed6ef;}table tr:nth-child(odd){background-color:#fffcfc;}table tr:hover{background-color:#e9abab;}</style><body><tableborder="1"><tr><th>姓名</th><th>数据</th><th>日期</th></tr><tr><td>张三</td><td>2</td><td>2003-9</td></tr><tr><td>李四</td><td>2</td><td>2003-8</td></tr><tr><td>王五</td><td>2</td><td>2003-7</td></tr></table></body></html>4.表单伪类
:disabled：表单禁用。:checked：选中状态，表单复选按钮。
/*禁用状态的输入框会显示灰色背景和浅色边框。*/<style>input:disabled{background-color:#f0f0f0;border:1px solid #ccc;}</style></head><body><inputtype="text"disabledplaceholder="禁用的输入框"></body></html>/* 当复选框被选中时，关联的标签文本会变为绿色并加粗。*/<style>input:checked + label{color:green;font-weight:bold;}</style></head><body><inputtype="checkbox"id="agree"><labelfor="agree">我同意条款</label></body></html>二、伪元素（Pseudo-elements）
伪元素用于选择元素的特定部分（如首行或内容前后），而非元素本身。它们以双冒号（::）开头（CSS3规范，但单冒号仍兼容）。
常见伪元素示例：
::before：在元素内容前插入生成内容。::after：在元素内容后插入生成内容。::first-line：选择首行。::first-letter：第一个字母。::placeholder：选择input或者textarea。
<style>div{height:100px;width:500px;}div::before{content:"开始"color:red;}div::before{content:"结束"color:red;}</style></head><body><div>文字</div></body></html>注意事项：
before和after是插入的伪元素，特性类似内联元素。
content属性是必须，不能省略，没有内容空引号即可。
后期非常非常常用。比如小图标、各种装饰效果。
三、核心区别
- 作用对象：伪类针对元素状态，伪元素针对元素的部分内容。
- 语法：伪类用单冒号（
:），伪元素推荐用双冒号（::）。 - 内容生成：伪元素常与
content属性配合生成虚拟内容。
