当前位置：首页 > news >正文

CSS伪类及伪元素：一篇搞懂

news 2026/7/8 17:02:26

文章目录

- - 一、伪类（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>