什么是 CSS 分页实例？初学者也能看懂的实用技巧
在网页开发中，我们经常需要展示大量数据，比如文章列表、商品信息或者用户评论。如果把这些内容一股脑儿塞进一个页面，不仅加载慢，用户体验也极差。这时候，分页就显得尤为重要。CSS 分页实例，正是解决这个问题的优雅方案之一。
你可以把分页想象成一本厚厚的书。如果你把所有内容都写在一页上，那这本书的厚度会让人望而生畏。而通过分页，每一页只放一部分内容，读者可以一页一页翻，轻松掌握信息。CSS 分页实例，就是用 CSS 技术实现这种“翻页”效果的技术实践。
它不依赖 JavaScript，完全通过样式控制，适合对性能要求高、内容结构清晰的场景。比如博客文章列表、商品分页、用户数据展示等。接下来，我会一步步带你从零开始构建一个完整的 CSS 分页实例。
从 HTML 结构开始搭建分页骨架
分页的实现，首先要有清晰的 HTML 结构。我们以一个简单的博客文章列表为例，每页显示 5 篇文章。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS 分页实例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="pagination-container">
<!-- 每篇文章作为一个独立的 item -->
<article class="article-item">
<h3>前端开发入门指南</h3>
<p>这篇文章介绍了 HTML、CSS 和 JavaScript 的基础概念...</p>
</article>
<article class="article-item">
<h3>Vue 3.0 新特性解析</h3>
<p>Vue 3.0 引入了 Composition API，让代码更易维护...</p>
</article>
<article class="article-item">
<h3>React 18 的并发渲染机制</h3>
<p>React 18 通过并发渲染提升了应用的响应速度...</p>
</article>
<article class="article-item">
<h3>Node.js 项目部署实战</h3>
<p>从本地开发到线上部署，完整流程详解...</p>
</article>
<article class="article-item">
<h3>TypeScript 入门与实践</h3>
<p>TypeScript 是 JavaScript 的超集，提供了类型安全...</p>
</article>
<!-- 更多文章（这里省略） -->
</div>
<!-- 分页导航区域 -->
<nav class="pagination-nav">
<button class="page-btn" data-page="1">1</button>
<button class="page-btn" data-page="2">2</button>
<button class="page-btn" data-page="3">3</button>
<button class="page-btn" data-page="4">4</button>
</nav>
</body>
</html>
说明：
article.article-item代表每一条文章内容，结构清晰，便于后续样式控制。nav.pagination-nav是分页按钮的容器，每个按钮通过data-page属性标记页码。- 这个结构是实现 CSS 分页实例的基础，后续所有样式都基于此展开。
使用 CSS 实现分页切换效果
现在我们来写核心的 CSS 样式。重点在于控制每一页的显示与隐藏，使用 :nth-child 选择器配合 display 属性。
/* 容器样式：设置布局和间距 */
.pagination-container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
/* 每篇文章的样式 */
.article-item {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 分页按钮容器 */
.pagination-nav {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
/* 分页按钮基础样式 */
.page-btn {
padding: 8px 12px;
border: 1px solid #ccc;
background: #fff;
color: #333;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
}
.page-btn:hover {
background: #f0f0f0;
border-color: #999;
}
/* 选中状态的按钮 */
.page-btn.active {
background: #007BFF;
color: white;
border-color: #007BFF;
}
/* 关键：控制每页显示的条目 */
/* 使用 :nth-child 选择器控制显示第 n 页的内容 */
/* 这里我们假设每页 5 篇文章，所以第 1 页显示前 5 篇，第 2 页显示第 6~10 篇，以此类推 */
.article-item:nth-child(n+1):nth-child(-n+5) {
display: block;
}
.article-item:nth-child(n+6):nth-child(-n+10) {
display: block;
}
.article-item:nth-child(n+11):nth-child(-n+15) {
display: block;
}
/* 其他页码隐藏 */
.article-item:nth-child(n+16) {
display: none;
}
说明：
:nth-child(n+1):nth-child(-n+5)表示选择第 1 到第 5 个子元素。n+6和-n+10的组合表示第 6 到第 10 个元素。- 这种写法在 CSS 中称为“区间选择器”，是实现分页的核心技巧。
display: none隐藏非当前页内容，实现“切换”效果。
动态切换页码：通过 JavaScript 激活对应页面
虽然 CSS 可以实现分页逻辑，但通常我们还需要 JavaScript 来动态切换页面状态。下面是一个简单的实现方式。
// 获取所有分页按钮和文章项
const pageButtons = document.querySelectorAll('.page-btn');
const articleItems = document.querySelectorAll('.article-item');
// 为每个按钮添加点击事件
pageButtons.forEach(button => {
button.addEventListener('click', function () {
// 移除所有按钮的 active 状态
pageButtons.forEach(btn => btn.classList.remove('active'));
// 添加当前按钮的 active 状态
this.classList.add('active');
// 获取当前页码（从 data-page 中读取）
const currentPage = parseInt(this.getAttribute('data-page'));
// 计算当前页应该显示的起始和结束索引
const start = (currentPage - 1) * 5 + 1; // 比如第 1 页从第 1 个开始
const end = currentPage * 5; // 比如第 1 页到第 5 个结束
// 遍历所有文章项，控制显示
articleItems.forEach((item, index) => {
const itemIndex = index + 1; // 索引从 1 开始计数
if (itemIndex >= start && itemIndex <= end) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
说明：
data-page是自定义属性，用于存储页码信息。parseInt()将字符串转为整数，确保计算正确。index + 1是因为querySelectorAll返回的索引从 0 开始，但页面计数从 1 开始。- 通过
style.display控制显示，和 CSS 的display: none互补使用。
优化体验：添加页面切换动画
为了让分页切换更流畅，我们可以添加 CSS 动画。这会让页面从“突然切换”变成“平滑过渡”。
/* 添加过渡动画 */
.article-item {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateY(0);
}
/* 隐藏时的动画效果 */
.article-item.hidden {
opacity: 0;
transform: translateY(10px);
}
然后在 JavaScript 中，给隐藏的元素添加 hidden 类：
articleItems.forEach((item, index) => {
const itemIndex = index + 1;
if (itemIndex >= start && itemIndex <= end) {
item.style.display = 'block';
item.classList.remove('hidden');
} else {
item.style.display = 'block'; // 先显示再隐藏，避免闪烁
item.classList.add('hidden');
}
});
说明：
transition定义了动画时间与缓动函数。opacity和transform联合使用，产生“淡入淡出+轻微上移”的效果。hidden类用于触发动画，提升用户体验。
实际案例：从 5 篇到 20 篇文章的完整分页系统
我们来扩展一下，假设总共有 20 篇文章，每页 5 篇，共 4 页。
<!-- 假设 HTML 中有 20 个 article-item -->
对应的 CSS 可以这样写：
/* 第 1 页：第 1~5 篇 */
.article-item:nth-child(n+1):nth-child(-n+5) { display: block; }
/* 第 2 页：第 6~10 篇 */
.article-item:nth-child(n+6):nth-child(-n+10) { display: block; }
/* 第 3 页：第 11~15 篇 */
.article-item:nth-child(n+11):nth-child(-n+15) { display: block; }
/* 第 4 页：第 16~20 篇 */
.article-item:nth-child(n+16):nth-child(-n+20) { display: block; }
/* 其他隐藏 */
.article-item:nth-child(n+21) { display: none; }
JavaScript 代码也只需修改按钮数量即可，无需改动逻辑。
| 页码 | 显示文章范围 | 适用场景 |
|---|---|---|
| 1 | 1~5 | 首页展示 |
| 2 | 6~10 | 第二页 |
| 3 | 11~15 | 中间页 |
| 4 | 16~20 | 尾页 |
说明：
- 这种方式完全可扩展，只需增加对应的 CSS 规则即可支持更多页码。
- 如果文章总数动态变化，可通过 JavaScript 生成按钮和 CSS 规则，实现全自动分页。
总结：CSS 分页实例的实用价值
CSS 分页实例是一种轻量、高效、易维护的前端技术方案。它不依赖复杂框架，只需 HTML + CSS + 少量 JavaScript，就能实现完整的分页功能。
对于初学者来说，它是一个绝佳的学习范例：你可以在实践中掌握 :nth-child、display、transition、data-* 属性等核心 CSS 知识。对于中级开发者，它提供了一种优雅的“无 JavaScript 逻辑分页”思路，尤其适合静态站点或性能敏感场景。
更重要的是，这种技术具备良好的可扩展性。无论是 10 篇文章还是 1000 篇，只需调整规则，就能快速适配。它就像一个可拆卸的模块，随时可以嵌入你的项目中。
如果你正在开发一个博客、商品列表或内容管理系统，不妨试试这个 CSS 分页实例。它不复杂，但足够强大，真正做到了“小而美”。