后代选择器应写为a:hover .link-title，即父级a触发悬停时仅作用于其内部的.link-title元素，而非整个链接；需确保.link-title是a的后代、补充a:active和a:focus状态、避免结构依赖、注意伪类书写顺序，并优先保障键盘可访问性。
后代选择器怎么选中“链接里的标题”而不是整个链接
直接写 a:hover 会让所有文字（包括描述、副标题）都加下划线，这不是你想要的。关键不是“怎么写 hover”，而是“hover 谁、作用谁”。a:hover .link-title 这种写法才是正解：父级 a 触发悬停状态，只把下划线加在它内部的 .link-title 上。
常见错误是写成 .link-container:hover .link-title —— 如果容器本身不可点击或没设置 cursor: pointer，用户根本不会去 hover 它；更糟的是，键盘焦点（:focus）和点击激活（:active）状态会丢失，破坏可访问性。
- 必须确保
.link-title是a的后代（任意嵌套层级），不能是兄弟或父级 - 如果
.link-title是display: block或flex，text-decoration: underline可能不显示——改用border-bottom: 1px solid currentColor - 别漏掉
a:active .link-title和a:focus .link-title，否则键盘用户 tab 到链接时看不到反馈
为什么 .card a:hover 会污染其他区域
.card a:hover 看似精准，实则危险：只要某个 a 在 .card 内部（哪怕嵌套五层深），它就会被命中。比如卡片里有个 .card-footer，里面放了个“分享到微博”的按钮（也是 a），它也会被强制加下划线——而设计稿里它本该是纯色背景按钮。
真正需要的，是“仅当这个链接代表主内容时才触发样式”。所以应该按语义加类，比如 a.card-main-link，再写 a.card-main-link:hover .card-title。这样即使 DOM 结构变化（比如标题从 h3 换成 div），样式依然可控。
- 避免用结构路径如
.card > .content > a:hover—— 一旦中间加个 wrapper，整条规则就失效 - 后代选择器性能略低于子选择器（
>），但对现代浏览器影响微乎其微；真正代价是维护成本 - 如果必须依赖结构，优先用
.card a.card-title-link:hover，把语义收在a自身上，而非靠父容器推断
a:hover span 和 a:hover > span 差在哪
前者是后代选择器，匹配 a 内任意深度的 span；后者是子选择器，只匹配 a 的**直接子元素** span。多数情况下你要的是前者——因为标题往往包裹在 div 或 h3 里，span 并非直接子级。
但如果你明确知道标题就是 a 的第一层子元素（比如 @#@#@#@#@#@#@#@#@#@0），那 a:hover > .title 更安全：它不会误中 里再嵌套的图标或 badge。
-
a:hover span：松散、容错强，适合结构不确定的 CMS 输出 -
a:hover > span：严格、易断裂，适合手写 HTML 且层级固定 - 两者特异性（specificity）完全相同，不存在“哪个优先级更高”的问题
伪类顺序写错会导致 hover 失效
CSS 伪类有默认顺序要求：:link 和 :visited 必须在前，:hover 和 :active 在后，:focus 通常放在 :hover 后面。写成 a:hover, a:visited 是错的——浏览器会忽略整个声明块，因为 :visited 出现在 :hover 之后。
正确写法必须是：
a:link .link-title,
a:visited .link-title {
text-decoration: none;
}
a:hover .link-title,
a:active .link-title,
a:focus .link-title {
text-decoration: underline;
}
-
:link和:visited不能合并写成a:link, a:visited后再加后代选择器——必须各自带上.link-title - 如果用了
!important强行覆盖，说明选择器优先级设计有问题，应回溯重构 - 移动端 Safari 对
:hover支持有限（需 touch 事件触发），:focus才是更可靠的交互反馈依据
实际项目里最常被忽略的，不是选择器写法，而是把 :focus 当作可选项——它不是锦上添花，而是 WCAG 2.1 AA 级合规的硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
