` 包裹，数字直接写在标题前

二、视觉样式优化（CSS示例）

css

container {

display: flex; / 启用弹性布局 /

justify-content: space-between; / 左右分列 /

left-section, .right-section {

width: 48%; / 保留间距 /

padding: 15px;

border: 1px solid eee;

h2 {

color: 333;

font-size: 1.2em;

margin-bottom: 10px;

counter-increment: section; / 自动计数功能 /

h2::before {

content: counter(section) ". ";

font-weight: bold;

说明：通过 `flex` 实现左右分栏，`counter-increment` 实现自动编号，无需手动添加数字

三、扩展应用场景

1. 多级标题组合

` 标签并调整计数器：

css

h3 {

counter-increment: subsection;

margin-left: 20px;

h3::before {

content: counter(section) "." counter(subsection) " ";

2. 交互效果增强

添加悬浮变色效果：

css

left-section:hover, .right-section:hover {

background: f9f9f9;

transition: 0.3s;

四、注意事项

1. 语义化优先

` 表示次级标题，需确保标题层级逻辑正确（如主标题用 `

`）

2. 浏览器兼容性

自动编号功能支持所有现代浏览器，但需测试IE旧版本的显示效果

3. 响应式适配

添加媒体查询，手机端切换为上下排列：

css

@media (max-width: 600px) {

container { flex-direction: column; }

left-section, .right-section { width: 100%; }

通过以上方案，既可实现专业排版效果，又能通过CSS自动编号减少维护成本。如需更复杂的样式（如圆形序号、彩色标签），可参考微信公众号编辑器的设计模板。

泰剧追剧神器免费高清在线观看平台海量正版资源同步更新流畅播放

软件更新失败常见原因排查与解决方法全解析

文字配图神器轻松实现图文混排的智能设计工具推荐