:target伪类仅在url含匹配fragment时激活对应元素，可实现锚点高亮、无js展开/弹窗；但不能替代js做多级折叠、持久状态记忆或响应非hash跳转。
target伪类能做什么，不能做什么
:target 只在 URL 中存在匹配的 fragment（即 #id）时激活对应元素，它本身不点击、不切换、不记忆状态——纯粹是“当前 URL 指向谁，谁就高亮/展开”。这意味着：它不能替代 JavaScript 实现多级折叠、不能持久保存展开状态、也不能响应非 hash 跳转（比如 history.pushState）。适合静态文档锚点导航或单页简单菜单，不适合需要交互记忆的侧边栏。
侧边栏 HTML 结构怎么写才让 :target 生效
关键不是嵌套多深，而是每个菜单项必须对应一个可被 hash 指向的 id 元素，且该元素得在 DOM 中真实存在、可滚动定位。常见错误是把 id 放在 <li> 里却忘了它没高度/内容，导致 :target 匹配了但视觉无变化。
- 菜单项用
<a href="#section1">首页</a>，对应区域写成<section id="section1"></section> - 不要把
id放在<div class="menu-item"> 这类空容器上；至少加 <code>min-height: 1px或含文本，否则浏览器可能忽略定位 - 如果侧边栏固定定位（
position: fixed），要确保目标元素在视口内有实际位置，否则:target触发后页面不会自动滚动到它
用 CSS 控制展开/高亮的典型写法
核心思路是：让菜单子项默认隐藏，当其父容器或自身成为 :target 时，通过后代选择器或相邻兄弟选择器显示对应内容。注意层级关系必须严格匹配 DOM。
nav a { display: block; padding: 8px; }
nav a:hover { background: #eee; }
<p>/<em> 点击 #dashboard 后，显示 .dashboard-content </em>/</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/3860" title="虾345"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/178599579771572.png" alt="虾345" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/3860" title="虾345" class="overflowclass">虾345</a>
<p class="overflowclass">虾345是面向AI Agent生态的综合型导航与信息聚合平台。</p>
</div>
<a rel="nofollow" href="/ai/3860" title="虾345" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><h1>dashboard:target ~ .dashboard-content,</h1><p>.dashboard-content:target { display: block; }</p><p>/<em> 或更稳妥：把 target 放在容器上，统一控制 </em>/
.menu-section:target .submenu { max-height: 500px; opacity: 1; }
.menu-section .submenu {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s, opacity 0.2s;
}</p>
这里 max-height 是 hack 方式实现展开动画（不能用 height: auto 做过渡），值需预估足够大；opacity 辅助视觉反馈。若子菜单项本身带 id，也可直接写 #users:target { ... } 单独控制。
容易被忽略的兼容与体验细节
IE9+ 支持 :target，但 Safari 在某些 zoom 场景下会错失定位；移动端点击 anchor 后，若页面已有滚动，:target 可能不触发滚动到目标——这不是 bug，是浏览器按规范只在 hash 变化时尝试滚动，而 JS 干扰过 scroll 行为就会失效。
- 测试时务必用真实 URL 刷新（如
page.html#settings），而非仅在 DevTools 里改 location.hash - 避免在
:target样式中设置display: none给父容器，否则子元素再设display: block也无效（display 层级压制） - 如果侧边栏有多个独立菜单块，每个块需各自有唯一
id和对应:target规则，不能共用一个 selector
真正麻烦的从来不是写几行 CSS，而是当用户手抖多点两次链接、或者从外部链接带 hash 进来时，菜单是否还保持预期行为——这时候 :target 的被动性就暴露得很清楚。
