CSS Module 不支持嵌套语法（如 .catTable { .catTr { ... } }），但可通过父选择器直接写 tr 来实现对子元素的样式控制，无需额外类名。
css module 不支持嵌套语法（如 `.cattable { .cattr { ... } }`），但可通过父选择器直接写 `tr` 来实现对子元素的样式控制，无需额外类名。
在 CSS Module 中，样式是局部作用域的，但选择器本身仍遵循标准 CSS 语法规则——这意味着你可以在 .catTable 规则内直接使用后代选择器（如 tr）来定义其内部 <tr> 元素的样式，而无需为每个 <code><tr> 单独添加 <code>className。
✅ 正确写法（推荐）：
/* basic-styles.module.css */
.catTable {
border: 1px solid black;
}
.catTable tr {
border: 1px solid pink; /* 有效：作用于 .catTable 下的所有 tr */
background-color: #fffdfb; /* 可叠加其他样式 */
}⚠️ 注意事项：
- ❌ 不要写成嵌套式（
.catTable { .catTr { ... } }）——CSS Module 不解析嵌套语法，这会直接失效； - ❌ 不要试图在 CSS 中定义
.catTr后却在 JSX 中漏掉className={styles.catTr}——若坚持用独立类名，则必须双向一致； - ✅
tr是块级表现元素，但默认无边框、无背景，border需配合border-collapse: collapse或border-spacing: 0才能清晰显示（尤其与td边框协同时）；
? 建议增强表格视觉效果的完整示例：
立即学习“前端免费学习笔记（深入）”；
.catTable {
border: 1px solid #333;
border-collapse: collapse; /* 关键：让 tr/td 边框合并 */
width: 100%;
}
.catTable tr {
border-bottom: 1px solid pink; /* 更自然的行分隔 */
}
.catTable td {
padding: 8px 12px;
border-right: 1px solid #eee;
}
.catTable tr:last-child td {
border-bottom: none; /* 最后一行底部不留边 */
}? 总结：CSS Module 的核心优势是作用域隔离，而非扩展语法。想样式化子元素，请使用标准后代选择器（如 .catTable tr），它既保持局部性，又简洁可靠——无需额外类名，也无需引入预处理器。
