ruby标签仅提供语义化注音，不自带高亮功能；需用css精准作用于rb元素（如color、font-weight、text-shadow）实现生僻字视觉强化，且必须保持rb/rt严格配对以确保可访问性与渲染正确。
ruby 标签本身不提供“突出显示”功能，它只负责语义化注音；想让生僻字视觉上更醒目，必须靠 CSS 配合结构控制，且不能破坏 rb/rt 的严格配对关系。
为什么直接写 <ruby>龘<rt>dá</rt></ruby> 不会高亮生僻字
浏览器把 ruby 当作纯语义容器，rb（基字）默认无样式，rt（注音）默认小号上标——但“龘”本身只是普通文本，没有任何视觉强化。常见错误是以为加了 ruby 就自动变色/加框/放大，结果页面毫无变化。
- 漏掉
rb：写成<ruby>龘<rt>dá</rt></ruby>→ Firefox/Edge 直接忽略rt，拼音平铺在字后 - 没设字体或颜色：即使结构正确，
rb内容仍继承父级样式，和普通文字一样 - 用
span包裹rb再加样式 → 破坏语义层级，部分屏幕阅读器无法关联基字与注音
给 rb 单独加样式的正确写法
必须确保样式只作用于 rb 元素本身，且不影响 rt 的排版逻辑。以下 CSS 是跨浏览器稳定生效的最小集合：
ruby rb {
color: #d32f2f;
font-weight: bold;
text-shadow: 0 0 4px rgba(211, 47, 47, 0.3);
}
ruby rt {
font-size: 0.65em;
line-height: 1;
color: #666;
}
-
ruby rb选择器精准命中基字，避免误伤其他内联元素 - 不用
background或border—— 容易撑开行高，导致rt偏移或被裁剪 -
text-shadow比纯加粗更柔和，适合小字号生僻字（如“靐”“齉”） - 禁用
ruby { display: inline-flex }—— 会切断浏览器内置的 ruby 对齐引擎
多字生僻词需要逐字控制样式
像“龘靐齉”这种三连生僻字，若统一用一个 ruby 包裹，CSS 无法单独高亮其中某字。必须拆成三个独立 ruby，才能实现差异化强调：
<ruby><rb>龘</rb><rp>(</rp><rt>dá</rt><rp>)</rp></ruby><ruby><rb>靐</rb><rp>(</rp><rt>bīng</rt><rp>)</rp></ruby><ruby><rb>齉</rb><rp>(</rp><rt>nàng</rt><rp>)</rp></ruby>
- 每个
rb可单独加 class：<rb class="rare-emph">龘</rb>，方便 JS 动态标记 - 避免用
nth-child选中 —— 连续多个ruby在不同浏览器中 DOM 结构可能插入空格文本节点，导致序号错乱 - 若需响应式缩放，用
clamp(1rem, 2.5vw, 1.2rem)控制rb字号，别用固定像素
容易被忽略的可访问性细节
加红加粗只是视觉提示，对屏幕阅读器无效。若该字确实生僻到需要额外解释（比如“彧”读 yù 且意为“有文采”），仅靠 ruby 注音不够：
-
rb上加aria-label="彧（yù）：有文采"→ VoiceOver 会朗读完整说明 - 不要用
title属性做提示 —— 移动端不触发，且与ruby语义冲突 - 若整段含大量生僻字，建议在段落开头加说明：
<p class="note">以下文字含生僻字，已标注拼音及简要释义</p> - 测试时关闭 CSS，确认纯文本流仍是“龘(dá) 靐(bīng) 耬(nàng)”格式，而非乱码或缺失括号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
