双栏杂志式布局下如何用CSS伪类控制H2排版？

完全可以通过CSS选择器（含伪类）结合分栏属性实现你的需求，以下是具体实现思路和代码：

基础多栏布局设置 #

先给TipTap编辑器容器配置双栏基础样式：

.tiptap-editor {
  columns: 2;
  column-gap: 2.5rem; /* 调整栏间距，模拟杂志排版的留白感 */
  line-height: 1.6;
}

定位H2并设置章节分隔规则 #

方案1：让H2横跨所有栏（杂志大标题风格） #

如果希望章节标题占满全屏宽度，下方内容再分双栏展示，使用column-span属性：

/* 定位所有H2，也可结合伪类精准选择，比如:nth-of-type(even)选中偶数位H2 */
.tiptap-editor h2 {
  column-span: all;
  margin: 2rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

/* 用伪类移除第一个H2的顶部外边距 */
.tiptap-editor h2:first-of-type {
  margin-top: 0;
}

方案2：让H2作为章节开头，强制后续内容从新栏起始 #

如果希望每个章节（H2+下方内容）从新栏开始，用break-after属性强制分栏：

.tiptap-editor h2 {
  break-inside: avoid; /* 避免标题被拆分到两栏，保证完整性 */
  break-after: column; /* 标题后强制开启新栏 */
  margin-top: 2rem;
}

/* 伪类优化第一个H2的边距 */
.tiptap-editor h2:first-of-type {
  margin-top: 0;
}

额外细节优化 #

为避免段落被拆分到两栏影响阅读，可给段落添加防拆分规则：

.tiptap-editor p {
  break-inside: avoid;
}

内容的提问来源于stack exchange，提问作者Francesco Mansi