本文介绍一种简洁、可维护的方式，通过 CSS 继承机制将 font-size: 10px 统一应用于表格（）及其所有单元格（/）内嵌的任意子元素（如 、、 等），避免逐个类名覆盖或滥用 !important。

本文介绍一种简洁、可维护的方式，通过 css 继承机制将 `font-size: 10px` 统一应用于表格（`

`）及其所有单元格（`

`/`

`）内嵌的任意子元素（如 ``、` `、`` 等），避免逐个类名覆盖或滥用 `!important`。 在实际开发中，常遇到这样的需求：表格整体需使用小号字体（如 10px），但表头（<th>）或单元格（<code><td>）内部可能嵌套多种元素（如 <code><span></span>、<div>、<code><input>、<button></button> 等），而这些子元素往往自带或被其他样式规则设置了更大的 font-size（如 14px 或 18px），导致视觉不统一。 直接为每个子标签单独写选择器（如 .table_span, .table_div）不仅冗余，还违背“从通用到特例”的 CSS 设计原则。更优雅的解法是利用 CSS 继承 + 通配符选择器，让所有后代元素自动继承父级字体设置。 ✅ 推荐方案：全局定义 + 强制继承 只需两步即可实现全表字体归一化： 在 <table> 上设置基础 <code>font-size 和 line-height； 强制 <th> 和 <code><td> 内所有子元素继承该字体。<pre class="brush:php;toolbar:false;">/* 推荐：作用于所有 table 元素（可加 class 限定作用域） */ 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; /* 显式继承字体族，避免意外回退 */ } th { background-color: #f2f2f2; } /* 关键：让 th 和 td 内所有子元素无条件继承字体设置 */ th *, td * { font-size: inherit !important; /* 强制继承，覆盖外部干扰 */ font-family: inherit; }</pre> <blockquote><p>? 注意：<code>th * 和 td * 是后代选择器（非子选择器 >），能匹配任意层级嵌套的元素（如 td > div > span），确保深度内容也被纳入控制。 ⚠️ 常见误区与修复建议 HTML 结构错误：原示例中误用 / 作为表格结构标签，应改为语义正确的 <thead> 和 <code><tbody>；<li> <strong>选择器逻辑错误</strong>：<code>.table_span span 意图匹配「带 .table_span 类的元素内的 span」，但实际 span 自身有该类 —— 正确写法应为 .table_span { font-size: 14px; }，而本方案中这类规则应被移除或注释掉，交由继承统一管理； 过度特化风险：若页面存在多个表格且样式需求不同，建议为特定表格添加唯一 class（如 <table class="compact-table">），并将样式作用域限定为 <code>.compact-table，避免全局污染。 ? 最佳实践总结 ✅ 优先使用 font-size: inherit 而非固定值，增强可维护性； ✅ 配合 font-family: inherit 和 line-height，保障排版一致性； ✅ 用 !important 仅用于 th *, td * 规则中——这是可控、有限、目的明确的强制继承，不同于滥用 !important 的反模式； ✅ 开发时善用 CSS 注释临时禁用旧规则（如 /* .table_tr td { ... } */），逐步清理技术债。 最终效果：无论 <th> 中是纯文本、<code><input> 还是嵌套三层的 <div><p><span>，所有内容均以 <code>10px 渲染，清晰、紧凑、风格统一。