在class为label的h3内添加button，如何保留原有样式并实现无障碍？

核心思路其实很简单：让按钮完全继承父元素<h3 class="label">的样式，同时清空按钮自身的默认浏览器样式，不用额外加类，靠CSS选择器就能搞定：

• 先用all: unset清空按钮自带的边框、背景、内边距、字体这些默认样式，让它彻底继承h3的所有样式
• 把按钮宽度设为100%，确保点击区域覆盖整个h3，避免原来的交互范围变小；再加上text-align: inherit和cursor: inherit，保持和原h3一模一样的文本对齐、鼠标指针样式
• 别忘了保留焦点样式（无障碍要求必须有），用outline: revert就能恢复浏览器默认的焦点提示，不用自己写

具体CSS代码直接这样写：

h3.label > button {
  all: unset;
  width: 100%;
  text-align: inherit;
  cursor: inherit;
  /* 无障碍必备的焦点样式 */
  outline: revert;
}

这么改完之后：

• 按钮和原来的h3样式完全一致，不会多出奇怪的默认按钮样式
• 保留了aria-expanded这个关键的无障碍属性，符合无障碍标准
• 不用加任何额外类名，代码干净还好维护

要是你项目里本来就有全局的按钮重置类，也可以直接用，但不想加类的话，上面这个选择器方案是最直接高效的。

内容的提问来源于stack exchange，提问作者Malvinka