点击链接后某段文字加粗本质是交互行为，需通过JavaScript或CSS伪类实现：可用内联onclick修改fontWeight、:target伪类响应hash变化，或classList.toggle切换CSS类；禁用动态插入<strong>标签以保语义。
点击链接后只让某段文字加粗，不是跳转页面
这本质不是“超链接行为”，而是用 <a> 标签触发 JavaScript 或 CSS 状态变更。HTML 本身没有“点击后某区域变粗”的原生语义，必须靠交互逻辑驱动。
常见错误是直接写 <a href="#">点我变粗</a>，结果页面跳到顶部，或什么都没发生——因为没绑定任何动作。
- 如果目标区域是固定的一段文字（比如
<span id="target">这段要变粗</span>），最轻量做法是用onclick内联事件 +style.fontWeight - 不推荐用
<strong>动态插入标签，会破坏原有 DOM 结构和语义 - 避免用
href="javascript:void(0)"，现代标准更倾向href="#"配合event.preventDefault()
示例：
<a href="#" onclick="document.getElementById('target').style.fontWeight='bold'; return false;">点我加粗</a>
<span id="target">这段文字将变粗</span>
CSS :target 伪类能实现“点击锚点后局部加粗”吗？
可以，但有严格前提：目标元素必须带 id，且链接的 href 必须精确匹配该 id（即 href="#myid"）。
立即学习“前端免费学习笔记（深入）”；
它不执行 JS，纯靠浏览器定位行为触发样式，适合静态场景，但有个关键限制：只有在 URL hash 变化、且页面滚动到对应位置时才生效；如果用户没滚动、或目标不可见，:target 不会激活。
-
:target是一次性状态，点击后 URL 带 hash，刷新页面仍保持加粗；想取消得手动改 URL 或用 JS 清除 hash - 不能用于“点击一次加粗、再点一次恢复”的切换逻辑
- 兼容性好（IE9+），但不适用于 SPA 或需要静默操作的场景
示例：
<a href="#section1">点我高亮第一节</a>
<h2 id="section1">第一节内容</h2>
<style>
#section1:target { font-weight: bold; }
</style>
用 class 切换实现可逆的加粗/恢复
这是最可控、可复用的方式：定义一个 CSS 类（如 .bolded），用 JS 切换该类到目标元素上。
比内联 style 更易维护，支持过渡动画，也方便后续扩展（比如同时改颜色、背景等）。
- 别用
className = "bolded"全量覆盖，要用classList.toggle()实现点击切换 - 如果多个链接控制同一段文字，确保所有
onclick指向同一个目标元素 ID - 注意事件委托场景下，需验证
event.target是否为预期链接，避免误触发
示例：
<style>.bolded { font-weight: bold; }</style>
<a href="#" onclick="document.getElementById('text').classList.toggle('bolded'); return false;">切换加粗</a>
<span id="text">这段文字可被切换加粗</span>
为什么不用 <strong> 标签包裹再显示/隐藏？
因为 <strong> 是语义标签，代表“内容重要性提升”，不是样式开关。把它当样式工具用，会污染语义结构，影响可访问性（屏幕阅读器会加重朗读）、SEO 和未来样式重构。
更实际的问题是：动态插入/移除 <strong> 标签会改变 DOM 层级，可能破坏已有事件绑定、CSS 选择器作用域，甚至引发重排（reflow）。
- 如果真要保留语义，应预先写好
<strong>，再用 CSS 控制显隐（如strong { display: none; }+ 切换 class 显示） - 但多数情况下，“点击变粗”只是视觉反馈，用
font-weight直接控制更干净 - 记住：样式归 CSS，行为归 JS，语义归 HTML —— 三者边界模糊的地方，最容易出维护债
