CSS Modules 不支持嵌套语法（如 .catTable { .catTr { ... } }），但可通过父选择器直接声明子元素样式，例如 .catTable tr，即可为表格内的所有 tr 设置样式。

css modules 不支持嵌套语法（如 `.cattable { .cattr { ... } }`）——这种写法在标准 css 预处理器（如 sass）中有效，但在原生 css modules 中会被忽略或解析失败。因此，即使你定义了 `.cattr` 类并手动添加到 `

` 上，若样式规则未正确匹配（如缺少全局作用域或选择器权重问题），视觉效果也不会生效。

要为

内的 统一设置样式，最可靠且符合 CSS Modules 设计理念的方式是使用组合选择器（combinator），即在 CSS 文件中直接书写：@@######@@

⚠️ 重要提示：border 在

上可能不可见
HTML 表格默认启用 border-collapse: collapse（浏览器默认行为），此时 的 border 属性不会直接显示——边框实际由 设置 border 在多数场景下无效，优先通过

或	承担。因此，若目标是给每行添加分隔线，推荐以下两种更稳健的方案： ✅ 方案一：为	设置上/下边框（推荐） @@######@@ ✅ 方案二：用 outline 或 box-shadow 模拟行边框（绕过 collapse 限制） @@######@@ ? 总结 CSS CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。 下载 CSS Modules 中禁止嵌套写法（.catTable { .catTr { ... } }），应改用 .catTable tr 等组合选择器； 直接对
控制边框； 始终显式设置 border-collapse: collapse 或 separate 以避免浏览器默认差异； 若需动态控制某一行样式（如 hover、选中态），可结合 :hover 或 React 状态类名（如 className={styles.catTable + ' ' + (isActive ? styles.activeRow : '')}）实现。

/* basic-styles.module.css */
.catTable {
  border: 1px solid black;
}

.catTable tr {
  border: 1px solid pink;
  /* 注意：border 在 tr 上默认不渲染可见边框（因 table 边框折叠机制） */
}

.catTable {
  border-collapse: collapse; /* 显式声明，确保行为一致 */
}

.catTable tr td {
  border-bottom: 1px solid pink;
  padding: 8px;
}

.catTable tr:last-child td {
  border-bottom: none; /* 最后一行不加底边框 */
}

.catTable tr {
  outline: 1px solid pink; /* outline 不受 collapse 影响，但会环绕整个行 */
  /* 或 */
  box-shadow: 0 1px 0 pink; /* 更可控的下边效果 */
}

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