用语义化HTML（section/article/dl）配合CSS Grid+Flex可构建清晰、响应式、可访问的产品对比页；避免table，用grid-template-areas命名区域实现灵活列管理，data-value+属性选择器高亮差异，dt视觉隐藏但保留可访问性。

直接用 CSS Grid + Flex 布局就能做出清晰、响应式、可维护的产品对比页，不需要框架，也不用 JavaScript 控制显隐——关键在语义化 HTML 结构和层叠逻辑的设计。

table 还是 div？先选对容器结构

别用

标签做产品对比——它语义错误（这不是数据表格），且移动端难以横向滚动或折叠。用语义化

包裹，每个产品用

，特性项用

（

描述项名，

放值）最稳妥。

这样做的好处：

• 屏幕阅读器能自然读出“CPU：Intel i7”这类成对信息
• 后续加「仅显示差异项」逻辑时，JS 只需操作 dl 的 class，不碰结构
• 打印样式表里可直接 dl { display: grid } 保证纵向对齐

用 grid-template-areas 对齐多列，避免手动计算 fr

当产品数动态（比如 2～4 款），硬写 grid-template-columns: 1fr 1fr 1fr 容易错位。改用命名区域更直观：

section.comparison {
  display: grid;
  grid-template-areas:
    "header header header"
    "feature p1 p2"
    "feature p1 p2"
    "feature p1 p2";
}

然后给每个产品设置 grid-area: p1，特性行设 grid-area: feature。新增第三款产品？只需补一列到 grid-template-areas 并加对应 grid-area 声明，不用重算比例。

注意点：

• grid-template-areas 每行引号内空格数必须一致，否则整条声明失效
• 所有 grid-area 名称必须全小写、无符号，否则不匹配
• IE 不支持该语法，如需兼容，降级用 grid-column: 2 / 3 手动定位

「高亮差异」不是靠 JS 切 class，而是用属性选择器 + :not()

用户常想「只标出不同配置的单元格」，但每次 JS 遍历比对太重。换种思路：让 HTML 告诉 CSS 哪些项有差异。

给每个

加 data-value 属性存原始值：

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

16GB DDR5

8GB DDR4

再用属性选择器筛出非统一值：

dd[data-value="16GB"]:not(:first-of-type) {
  background: #fff9c4;
}
dd[data-value="8GB"]:not(:first-of-type) {
  background: #ffcdd2;
}

这样既免去 JS 计算，又保留完全静态渲染能力。如果后端能输出标准化值（如统一小写、去除单位），CSS 层就能全自动标记。

移动端折叠「特性描述」列，但保留可访问性

小屏上「CPU」「内存」这些文字列太占宽度，直接隐藏会破坏语义。正确做法是视觉隐藏但保留读取：

dt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
dd::before {
  content: attr(data-label) ": ";
  font-weight: 600;
}

同时把 data-label 从

提到

上，确保即使 dt 被裁剪，辅助技术仍能读到上下文。

这个细节容易被忽略：很多「响应式对比页」在手机上只剩一堆孤立数值，毫无可访问性，也违背 WCAG 1.3.1 原则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！