本文介绍如何通过 CSS 继承机制，将 font-size: 10px 统一应用于表格（）中所有单元格及其内部任意嵌套元素（如 、、 等），避免逐个选择器覆盖，提升可维护性与一致性。
本文介绍如何通过 css 继承机制，将 `font-size: 10px` 统一应用于表格（`
`）中所有单元格及其内部任意嵌套元素（如 ``、``、`
` 等），避免逐个选择器覆盖，提升可维护性与一致性。
在实际开发中，常遇到这样的需求：表格整体需使用统一的小号字体（如 10px），但表头（<th>）或单元格（<code><td>）内可能嵌套了 <code>span、div、input 等不同标签，而这些元素又各自定义了更具体的字号（如 14px 或 18px），导致样式不一致。若采用 .table_span span { font-size: 10px } 这类针对性覆盖写法，不仅冗余，还易遗漏新加入的元素类型，且违背 CSS “自上而下、由泛至精” 的设计原则。
推荐方案：利用继承 + 通配符重置
核心思路是：
✅ 将 font-size 设置在 table 元素上，作为基准字号；
✅ 显式声明 th * 和 td * 中所有后代元素继承该字号与字体族；
✅ 移除冲突的细粒度规则（如 .table_span span），改用语义化类名或直接依赖继承。
以下是优化后的完整 CSS：
@@######@@
⚠️ 注意事项：
- HTML 结构必须规范：
<thead> 和 <code><tbody> 需正确闭合（原示例中 <code> 和 <thead> 和 <code><tbody>）；<li>避免无效选择器：如 <code>.table_span span 实际匹配的是「拥有 .table_span 类的父容器下的 span」，而非带该类的 span 本身——应简化为 .table_span { font-size: 10px; } 或直接移除（因已继承）；
- 若页面含多个表格且需差异化样式，建议为特定表格添加唯一 class（如
.compact-table），将上述规则限定作用域：.compact-table { font-size: 10px; }；
-
input、button 等表单控件默认不完全继承 font-size（尤其在某些浏览器中），因此 th *, td * 的通配重置至关重要。
最终 HTML 示例（结构修正后）：
@@######@@总结：与其用大量 !important 或深层嵌套选择器强行覆盖，不如回归 CSS 继承本质——在容器层级设定基础样式，并通过 * 通配符确保子元素无一例外地继承。这不仅代码更简洁、性能更优，也显著增强样式的可预测性与可扩展性。
/* 基准样式：作用于整个表格及其所有后代 */
table {
border-collapse: collapse;
width: 100%;
font-size: 10px; /* 关键：统一基准字号 */
line-height: 1.2em; /* 推荐同步设置行高，保证可读性 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
font-family: inherit; /* 继承 table 的字体族 */
font-size: inherit; /* 确保 th/td 自身也遵循 10px */
}
th {
background-color: #f2f2f2;
}
/* 强制所有 th 和 td 内部元素继承字号与字体 */
th *,
td * {
font-size: inherit;
font-family: inherit;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
