本文介绍如何通过 CSS 继承机制，将 font-size: 10px 统一应用于表格（）中所有单元格及其内部任意嵌套元素（如 、、 等），避免逐个选择器覆盖，提升可维护性与一致性。

本文介绍如何通过 css 继承机制，将 `font-size: 10px` 统一应用于表格（`

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

`）中所有单元格及其内部任意嵌套元素（如 ``、`

`、`` 等），避免逐个选择器覆盖，提升可维护性与一致性。

在实际开发中，常遇到这样的需求：表格整体需使用统一的小号字体（如 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：

/* 基准样式：作用于整个表格及其所有后代 */
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;
}

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 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 示例（结构修正后）：

<table class="compact-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
  </tbody>
</table>

总结：与其用大量 !important 或深层嵌套选择器强行覆盖，不如回归 CSS 继承本质——在容器层级设定基础样式，并通过 * 通配符确保子元素无一例外地继承。这不仅代码更简洁、性能更优，也显著增强样式的可预测性与可扩展性。