在前端开发过程中，HTML和CSS文件的迭代修改非常频繁，当需要回溯某个样式调整或者结构变更的历史记录时，使用命令行查看git diff操作不够直观，而SourceTree的可视化对比功能可以清晰展示不同版本之间的差异，大幅提升代码回溯效率。
准备工作
首先需要确保已经在Mac上安装好SourceTree，并且已经将包含HTML和CSS文件的前端项目克隆到本地，项目已经存在至少两次以上的提交记录，方便后续进行历史改动对比。
确认项目关联
打开SourceTree后，在左侧的本地仓库列表中找到目标前端项目，点击进入仓库详情页，此时可以在中间的提交历史面板看到所有的提交记录，每条记录都包含提交者、提交时间和提交说明信息。
定位需要对比的HTML或CSS文件
在提交历史面板中，点击任意一条提交记录，右侧的文件变更面板会显示该次提交中所有被修改的文件列表，找到需要查看历史改动的HTML或者CSS文件，点击该文件即可初步查看本次提交和上一次提交的差异。
筛选特定类型文件
如果提交记录中文件较多，可以在文件变更面板的搜索框中输入.html或者.css，快速筛选出对应类型的文件，避免手动翻找浪费时间。
可视化对比两个版本的差异
如果需要对比非相邻两次提交的HTML或CSS改动，可以按照以下步骤操作：
- 在提交历史面板中，按住Command键依次点击需要对比的两个版本的提交记录，两个记录会同时处于选中状态。
- 右侧文件变更面板会显示这两个版本之间所有发生变动的文件，找到目标HTML或CSS文件点击即可。
- 对比界面会采用左右分栏的形式，左侧为旧版本内容，右侧为新版本内容，改动的部分会用不同颜色高亮标注，删除的内容显示为红色，新增的内容显示为绿色。
查看具体改动细节
对于HTML文件的改动，可以直观看到标签的增删、属性的修改、内容的调整；对于CSS文件，可以清晰看到选择器的变更、样式属性的新增删除、属性值的调整。如果需要查看某一行改动的上下文，可以滚动对比面板查看周围代码。
导出对比结果
如果需要将对比结果保存下来用于记录或者分享，可以在对比界面点击右上角的导出按钮，选择导出为文本或者HTML格式，导出的文件会完整保留改动的高亮标注，方便后续查看。
常见问题处理
如果点击文件后没有显示对比内容，可能是该文件在两次提交之间没有实际改动，或者文件类型不被SourceTree识别，此时可以检查文件的后缀名是否正确，或者尝试重新拉取最新的提交记录。
以下是一个简单的HTML文件示例，假设我们在两次提交中修改了这个文件的结构，就可以通过上述方法对比差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 旧版本没有这个header标签 -->
<header>
<h1>页面标题</h1>
</header>
<main>
<p>页面主体内容</p>
</main>
</body>
</html>
对应的CSS文件修改示例，两次提交中调整了主体内容的字体大小：
/* 旧版本样式 */
body {
margin: 0;
padding: 0;
}
main p {
font-size: 14px; /* 新版本修改为16px */
color: #333;
}
/* 新版本新增的header样式 */
header {
background-color: #f5f5f5;
padding: 20px;
}
SourceTreeHTMLCSS版本对比git历史修改时间：2026-06-24 16:03:32