求助：HTML/CSS自定义按钮点击样式失效及文本显示问题

嘿，我来帮你搞定这个按钮交互的问题！咱们一步步拆解：

一、点击时outline变绿不生效的常见原因&解决办法 #

1. 默认样式被覆盖
   浏览器自带的:focus样式或者你引入的重置CSS（比如normalize.css）可能把outline干掉了，或者你的选择器优先级不够。试试用更精准的选择器，并且加上focus-visible（比普通:focus更符合无障碍设计，只在需要时显示）：

/* 假设你的按钮类是.custom-btn */
.custom-btn:focus-visible {
  outline: 2px solid green;
  outline-offset: 2px; /* 加个偏移让样式更美观 */
  /* 如果还是被覆盖，临时可以加!important，但尽量优先调整选择器优先级 */
  /* outline: 2px solid green !important; */
}

另外要注意CSS伪类的顺序：:link → :visited → :hover → :focus → :active，顺序错了后面的样式会覆盖前面的。

2. 按钮不是原生交互元素
   如果你用<div>模拟按钮，它默认没有:focus、:active这些交互状态，浏览器会把它当静态盒子处理。解决办法：

• 优先换成原生<button>标签，自带交互语义，不用额外配置就能触发:focus/:active
• 非要用div的话，给它加tabindex="0"让它可聚焦，再加上role="button"保证无障碍，然后配合:active伪类处理点击状态：

.custom-div-btn:active,
.custom-div-btn:focus-visible {
  outline: 2px solid green;
}

二、“Not at all”这类文本的显示/切换问题 #

如果是要点击按钮切换显示文本，纯CSS可以用隐藏的checkbox配合兄弟选择器实现，不用JS：

<!-- 隐藏的checkbox作为触发器 -->
<input type="checkbox" id="btn-toggle" class="sr-only">
<!-- 用label关联checkbox，模拟按钮 -->
<label for="btn-toggle" class="custom-btn">
  <span class="default-text">点击切换</span>
  <span class="active-text">Not at all</span>
</label>

/* 把checkbox隐藏掉 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 按钮基础样式 */
.custom-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}

/* 默认隐藏active文本 */
.active-text {
  display: none;
}

/* 勾选checkbox时切换文本显示 */
#btn-toggle:checked + .custom-btn .default-text {
  display: none;
}
#btn-toggle:checked + .custom-btn .active-text {
  display: inline;
}

/* 同时处理点击时的outline */
#btn-toggle:focus-visible + .custom-btn {
  outline: 2px solid green;
  outline-offset: 2px;
}

三、关于cale_b修改后的问题 #

如果应用修改后还是没效果，建议检查这几点：

• 你的选择器优先级是不是比其他CSS规则低（比如别人用了#id而你用了.class）
• 有没有拼写错误（比如把focus-visible写成focusvisible）
• 浏览器是否支持你用的伪类（focus-visible现在主流浏览器都支持，不用太担心）

试试这些调整，应该能解决你的问题！

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