用语义化html（section/article/dl）配合css grid+flex可构建清晰、响应式、可访问的产品对比页；避免table，用grid-template-areas命名区域实现灵活列管理，data-value+属性选择器高亮差异，dt视觉隐藏但保留可访问性。
直接用 CSS Grid + Flex 布局就能做出清晰、响应式、可维护的产品对比页，不需要框架，也不用 JavaScript 控制显隐——关键在语义化 HTML 结构和层叠逻辑的设计。
table 还是 div？先选对容器结构
别用 <table> 标签做产品对比——它语义错误（这不是数据表格），且移动端难以横向滚动或折叠。用语义化 <code><section></section> 包裹，每个产品用 <article></article>，特性项用 <dl></dl>（<dt></dt> 描述项名，<dd></dd> 放值）最稳妥。
这样做的好处：
- 屏幕阅读器能自然读出“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 哪些项有差异。
给每个 <dd></dd> 加 data-value 属性存原始值：
<dd data-value="16GB">16GB DDR5</dd> <dd data-value="8GB">8GB DDR4</dd>
再用属性选择器筛出非统一值：
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></dt> 提到 <dd></dd> 上，确保即使 dt 被裁剪，辅助技术仍能读到上下文。
这个细节容易被忽略：很多「响应式对比页」在手机上只剩一堆孤立数值，毫无可访问性，也违背 WCAG 1.3.1 原则。
