纯 CSS 实现涨跌色标：用 [data-change^="-"] 匹配负数标红，:not([data-change^="-"]) 匹配非负标绿；推荐语义化 class、CSS 变量和 SVG 箭头，避免字体字符与硬编码颜色。
表格中数值自动标红/绿：用 CSS 选择器 + 属性判断
纯 CSS 实现涨跌色标，关键不是写一堆 JS，而是利用 [data-change] 这类自定义属性配合属性选择器。浏览器原生支持，无运行时开销，且可复用。
- 给每个数值单元格加上
data-change属性，值为数字（如data-change="-2.3"或data-change="1.8"） - 用 CSS 属性选择器匹配正负：
td[data-change^="-"]匹配负数，td[data-change]:not([data-change^="-"])匹配非负（注意：0 和正数都走这条） - 避免用
:empty或:has()—— 后者不兼容旧版 Safari，前者无法识别带空格的文本
示例 HTML：
<td data-change="0.5">+0.5%</td><td data-change="-1.2">-1.2%</td>对应 CSS：
td[data-change^="-"] { color: #d32f2f; }<br>td[data-change]:not([data-change^="-"]) { color: #2e7d32; }
JS 动态渲染时统一加色：别在循环里反复 setAttribute
如果数据是 JS 拼接或通过 innerHTML 注入的，直接在生成字符串时就嵌入 class 或属性，比注入后再遍历 DOM 补属性快得多，也更稳定。
- 错误做法：
el.innerHTML = data.map(v => `<td>${v}%</td>`).join('');再用querySelectorAll('td')扫描并判断 - 正确做法：在 map 中直接计算：
data.map(v => `<td data-change="${v}" class="${v < 0 ? 'down' : 'up'}">${v > 0 ? '+' : ''}${v}%</td>`) - class 名要语义清晰（如
up/down），避免用red/green—— 换主题时只需改 CSS，不用动 JS
颜色值选 rgb() 还是十六进制？看是否需透明或无障碍适配
涨跌色不是装饰，是信息传达。用 rgb(46, 125, 50) 而非 #2e7d32，只为一个理由：后续可能加 rgba(46, 125, 50, 0.9) 控制对比度，或对接无障碍工具链（部分读屏软件对十六进制解析不如 rgb 稳定）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 深绿推荐用
rgb(46, 125, 50)（Material Design 标准值），深红用rgb(211, 47, 47) - 避免用
color: green或color: red—— 这两个关键词在高对比度模式下可能被系统强制替换，丢失语义 - 如果项目已用 CSS 变量，建议定义
--up-color: rgb(46, 125, 50); --down-color: rgb(211, 47, 47);，方便全局调整
箭头图标和文字对齐：别用 ↑ ↓ 字符硬塞
字符 ↑ ↓ 的 baseline 和数字不对齐，缩放后边缘发虚，且无法单独调色。真要加箭头，必须用 SVG 内联或伪元素。
- SVG 方案最稳：
<svg width="1em" height="1em" viewBox="0 0 24 24" class="icon-up"><path fill="currentColor" d="M12 8l-6 6h12z"/></svg>
配合vertical-align: middle和font-size: 0.8em微调 - 伪元素方案轻量但有限制：需确保父元素有
position: relative，且箭头方向靠transform: scaleY(-1)翻转，不能靠旋转——否则影响文字渲染 - 绝对不要用
↑或↓实体 —— 它们属于字体范畴，换字体就变形，iOS 上尤其容易错位
真正难的不是加颜色，是让颜色在所有设备、所有辅助技术、所有主题模式下都准确传达“升”或“降”的语义。这点常被跳过，但一上线就暴露。
