应优先使用原生<button>元素实现按钮，避免用<span>或<div>模拟——否则将缺失键盘操作（Enter/Space）、焦点管理及屏幕阅读器识别能力；若必须使用非原生标签，则需补全role="button"、tabindex="0"及键盘事件监听。
用 <span> 或 <div> 模拟按钮时的可访问性风险
纯文本包裹在非交互元素里（比如 <span>）再靠 CSS 加点击效果，本质是“假装是按钮”——键盘用户按 Enter 或 Space 不会触发，屏幕阅读器也读不出它是可操作控件。这不是样式问题，是语义缺失。
真正简洁的按钮，不该牺牲可访问性。以下方案优先级从高到低：
- 能用
<button>就不用其他标签——它自带焦点、键盘响应、语义明确 - 若必须用文字链式风格（如“删除”“编辑”），用
<a>+role="button"+tabindex="0"，并手动监听keydown处理Enter/Space -
<span>或<div>仅限内部嵌套场景（如图标+文字组合中文字部分），且绝不能单独作为触发点
<button> 去默认样式但保留交互能力的最小化写法
很多开发者怕 <button> 默认边框、内边距、背景色破坏设计，直接用 all: unset 或重置所有属性，结果把 focus 样式、鼠标指针、甚至部分浏览器的键盘响应也干掉了。
安全清空样式的同时保功能，关键只做三件事：
立即学习“前端免费学习笔记（深入）”；
- 用
appearance: none（加-webkit-appearance和-moz-appearance前缀）剥离原生控件外观 - 显式设置
cursor: pointer和outline: none（但必须搭配:focus-visible自定义焦点样式） - 保留
border: none和background: transparent，别碰user-select或pointer-events
示例：
button.text-only {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: transparent;
cursor: pointer;
outline: none;
padding: 0;
font: inherit;
color: inherit;
}
button.text-only:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
当按钮内容只有纯文本时，white-space 和 line-height 的隐性影响
文本按钮常被忽略行高和空白处理——尤其在 Flex 容器里垂直居中失败，或换行后高度突变，根源往往不是布局，而是文本渲染细节。
-
white-space: nowrap要谨慎：防止截断是好意，但长文本在小屏上会溢出容器，建议配合text-overflow: ellipsis和overflow: hidden -
line-height设为无单位数值（如1.2）比设像素值更安全，避免字体大小变化时行高错位 - 若按钮内含多词（如“保存并关闭”），用
word-break: keep-all防止中文被不合理断行
React/Vue 中动态生成文本按钮时，key 和 aria-label 的必要性
循环渲染一串“编辑”“删除”按钮时，光靠 key={id} 不够——如果多个按钮文案完全相同（比如都是“删除”），屏幕阅读器无法区分操作对象，用户可能误删。
- 必须为每个按钮添加唯一
aria-label，例如aria-label={`删除用户 ${name}`} - 避免用
index当key，尤其列表排序/过滤后，会导致状态错乱或动画异常 - 若按钮本身文案已含上下文（如“删除张三”），则
aria-label可省略，但需确保文案稳定、不依赖 JS 动态拼接
复杂点从来不在“怎么让字看起来像按钮”，而在“怎么让机器和人都清楚它是什么、对谁生效”。
