ruby容器本身不响应:hover/:focus，真正可交互的是rb、外层a/span等元素；rt/rp需加tabindex="0"才支持:focus；结构伪类如:nth-of-type(2)比:first-child更可靠；data-lang等自定义属性优于[lang]；line-height和vertical-align影响渲染需同步重置。
ruby 标签本身不支持伪类选择器直接作用于其内部隐式结构（比如 rt 或 rp），但你可以通过显式组合选择器 + 伪类，精准控制可交互或状态变化的注音容器。关键不是“ruby:hover 能不能用”，而是“哪些元素真正响应鼠标、焦点或状态变化”。
ruby 容器内哪些子元素能用 :hover 或 :focus
ruby 是内联级容器，本身不触发用户交互事件；真正可悬停或聚焦的是它包裹的 rb（基文）或外部包装的 span/a 等可交互元素。
-
ruby > rb:hover可生效——前提是rb没被设为display: inline（默认值），且父级没阻止事件冒泡 -
a > ruby:hover无效——a的悬停已由链接自身捕获，ruby不会额外触发 - 若想让整个注音区域响应悬停，推荐用
span.ruby-wrapper:hover ruby外层包裹并控制样式 -
rt和rp默认不可聚焦，加tabindex="0"后才能用:focus
用 :first-child 或 :nth-of-type 定位特定 ruby 注音组
当页面含多组 ruby，需差异化样式时，结构伪类比类名更轻量，尤其适合 CMS 或模板生成场景。
-
ruby:first-child—— 仅匹配父容器中第一个ruby，注意它必须是父元素的首个子节点（前面不能有文本或注释） -
ruby:nth-of-type(2)—— 更可靠，按标签类型计数，忽略文本节点干扰 -
ruby > rt:last-of-type无效——rt在ruby内只能有一个，:last-of-type不适用；改用ruby > rt即可 - 避免写
ruby *:hover，它会污染所有后代，包括rp里的括号
配合属性选择器区分注音语种或用途
HTML 允许给 ruby 添加自定义属性（如 data-lang="ja"），CSS 属性选择器可据此动态切换字体、颜色或间距。
-
ruby[data-lang="zh"] rt→ 中文注音用小字号、顶部对齐 -
ruby[data-role="gloss"] > rb→ 术语解释类注音，基文加下划线 -
ruby[title]:hover rt→ 仅当带title属性时，悬停才显示注音背景色（辅助可访问性） - 慎用
[lang]：浏览器对lang属性的继承和匹配不一致，data-lang更可控
真正容易被忽略的是：注音渲染高度受 line-height 和 vertical-align 影响，伪类触发样式变更后，若未重置这些值，可能造成行高塌陷或错位。别只盯着 :hover 背景色，先检查 ruby > rb 的 vertical-align: text-top 是否被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
