版本对比时怎么高亮显示差异行？

迷人的硕泽提问于 2026-03-06 15:02:21 阅读 4

交互

我在做配置文件的版本对比功能，想用颜色区分新增、删除和修改的行，但样式总是对不齐。

试过给不同状态的行加 class，但行号和内容错位了，看起来很乱。是不是得用 table 或者特殊布局？

.diff-added {
  background-color: #e6ffed;
  padding-left: 10px;
}
.diff-removed {
  background-color: #ffeef0;
  padding-left: 10px;
}
.diff-line {
  display: block;
  font-family: monospace;
}

版本对比

我来解答赞 1 收藏

反馈

1 条解答

Newb.子斌 Lv1

这个需求很常见，一般这样处理：

1. 表格布局确实更稳，每行用两个单元格分别放行号和内容。这样样式不会乱跑：













  
    42
    + 这是新增的行
  
  
    43
    - 这是删除的行

2. CSS可以这样写，保证对齐：



.diff-table {

  font-family: monospace;

  border-collapse: collapse;

  width: 100%;

}

.line-number {

  text-align: right;

  padding-right: 1em;

  color: #999;

  user-select: none;

}

.diff-added {

  background-color: #e6ffed;

}

.diff-removed {

  background-color: #ffeef0;

}

3. 如果不用table，也可以用flex布局，但处理行号对齐更麻烦。我上次折腾半天最后还是换回table了...

关键点就是行号和内容要分开容器，别混在一起。GitHub的diff实现也是类似思路，你可以F12看下他们的DOM结构。

2026-03-06 15:04