1. 超链接基础、缓存机制与锚点原理
体验真实的超链接跳转、:visited 缓存机制，以及锚点跳转的平滑滚动配置。
模拟浏览器窗口
实时 HTML + CSS 代码
属性与机制控制
提示：若选择百度或本地测试页并设为
_blank，点击链接会在新标签页打开。
原理说明：平滑滚动由 CSS 属性
应用方式：通常应用在根元素
当前设置代码：
scroll-behavior 控制。应用方式：通常应用在根元素
<html> 标签上。当前设置代码：
html { scroll-behavior: auto; }
2. 超链接伪类与样式进阶
什么是伪类？伪类（Pseudo-class）用于定义元素的特定状态。语法为 选择器:伪类名。
设计原理：浏览器实时监听用户行为。当行为触发时，浏览器匹配伪类并应用特殊样式。
交互演示区
我是一个链接，悬停/点击我
鼠标操作检测：
无操作
扩展：:hover 和 :active 还能用在哪？
只要能响应鼠标事件的元素（如 button、div、li）都可以用。
我是 Div / Li
等待操作...
实时 CSS 代码
1. 一步步变为高级样式
去除默认下划线
设置 link 基础颜色与字体
悬停变色 (a:hover)
悬停上浮 (a:hover)
添加背景与内边距
点击按压缩放 (a:active)
2. L-V-H-A 顺序陷阱
✅ 当前为正确顺序。
3. 扩展元素交互
添加 :hover 上浮与变色
添加 :active 按压缩放
🔥 高级链接与交互应用场景
1. 极简下划线跟随
a::after { content: ''; width: 0; transition: 0.3s; }
a:hover::after { width: 100%; }
a:hover::after { width: 100%; }
2. 滑动擦除变色
a { background: linear-gradient(...); background-size: 0 100%; }
a:hover { background-size: 100% 100%; }
a:hover { background-size: 100% 100%; }
3. 边框旋转发光
a::before { background: conic-gradient(...); animation: spin; }
a:hover::before { opacity: 1; }
a:hover::before { opacity: 1; }
3. 焦点、目标与结构伪类全解析
伪类不仅能控制超链接，还能控制焦点、锚点目标、甚至是列表里的第几个元素。开启右侧开关，观察特效如何精准“选中”目标元素。
交互演示区
1. 焦点交互
按 Tab 键切换，或鼠标点击试试
3. 结构伪类
- 第一项
- 第二项
- 第三项
- 最后一项
4. 语言状态
这是中文文本 (zh-CN)
This is English text (en)
当前 HTML 结构
伪类百宝箱
点击开启功能，查看特效：
通用焦点：:focus
键盘专属：:focus-visible
排除样式：:not()
目标高亮：:target
奇偶交替 (nth-child)
首尾修饰 (first/last-child)
多语言区分：:lang()
4. 高端交互场景
现代网站利用超链接与伪类，配合 CSS 变形（transform）或动画，实现极具吸引力的交互效果。
5. 超链接（<a>）到底能包什么？
在早期的 HTML 中，<a> 只能包裹行内元素（如文字）。但 HTML5 规范解放了它——只要目标有意义，<a> 可以包裹任何流内容（Flow Content）：文本、图片、甚至是整个复杂的区块（如商品卡片）。
选择链接类型
点击下方按钮，切换 <a> 标签内部包裹的内容：
💡 注意：在 HTML5 中，虽然
<a> 标签可以包裹 <div> 等块级元素，
但绝对不能包裹交互式元素（如 <button>、其他 <a>、<input>），否则会导致点击事件冲突和语义错误。