HTML5 中 body 的 text 属性已废弃，必须用 CSS 的 color 属性配合继承实现全局文本颜色；需注意表单控件不继承、框架重置覆盖、Shadow DOM 不穿透等问题。
body 标签的 text 属性在 HTML5 中已完全废弃，不能用于全局设文本颜色——它既不校验通过，也不能被 JS 读写，更不支持现代颜色语法。唯一可靠路径是用 CSS 的 color 属性配合继承机制。
直接用 body { color: ... } 是最简方案
把颜色声明写在 <style> 块或外链 CSS 文件里即可生效，子元素默认继承：
-
body { color: #2c3e50; }足以覆盖绝大多数段落、标题、列表文字 - 别写成
<body text="#2c3e50">—— 浏览器可能渲染，但document.body.text返回undefined，且 Lighthouse 会报“使用了过时属性” - 颜色值推荐用十六进制（
#2c3e50）或 HSL（hsl(210, 15%, 25%)），避免命名色（如darkgray）因 UA 解析差异导致不一致
表单控件不继承 color，必须单独处理
<input>、<textarea>、<select> 和 <button> 默认无视 body 的 color，因为浏览器 UA 样式强制设了独立值：
- 显式重置：添加
input, textarea, select, button { color: inherit; } - 注意 Firefox 对
<button>的 UA 样式更激进，有时需加!important（仅限此处，非全局滥用） - 若用了
appearance: none，务必同步补color，否则可能回退到系统默认色
框架重置样式会覆盖你的 body { color }
Bootstrap、Tailwind 等默认带全局重置规则，比如 * { color: inherit; } 或 p { color: #212529; }，会导致你写的 body { color: ... } 失效：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具的 Computed 面板，看最终
color值来源是哪条规则 - 提高选择器 specificity：改用
html body { color: #2c3e50; }或加类名<body class="theme-light">后写.theme-light { color: ...; } - 若用 CSS 自定义属性，必须定义在
:root，而非body：否则color: var(--text-color)在子元素中 fallback 到初始值
Shadow DOM 内部不继承 body 的 color
自定义元素或 Web Component 使用 Shadow DOM 时，body { color } 完全不会穿透进去：
- 必须在 shadow root 内部单独声明，例如在组件
<template>中嵌入<style>:host { color: var(--text-color, #2c3e50); }</style> - 无法靠外部样式“一劳永逸”，这是 Shadow DOM 的封装特性，不是 bug
- 如果组件需响应全局主题，得通过
part或 CSS 自定义属性 +:host显式桥接
真正麻烦的不是写那行 body { color: ... }，而是确认它到底有没有生效——得查继承链、UA 样式、框架重置、Shadow DOM 边界，以及是否被内联 style 或 JS 动态覆盖。绕不开这些，就别指望一个属性搞定全局字色。
