按钮样式失效主因是选择器未命中、优先级被覆盖或元素未渲染，需用开发者工具确认HTML结构、避免class名变动、合理提升选择器特异性，并检查display/visibility及disabled状态影响。
按钮样式失效，90%不是 CSS 写错了，而是被更高优先级规则覆盖、选择器没命中，或元素根本没渲染出来。先别改样式，得定位真实原因。
用开发者工具确认按钮是否被正确选中
右键点击“加入购物车”按钮 → 选“检查”，看 Elements 面板里高亮的 HTML 元素是不是你预期的那个 <button></button>。常见陷阱：
- 页面用了多个主题或插件，按钮实际是
<a class="add_to_cart_button"></a>而非<button></button>，你写的button.add-to-cart根本不匹配 - WooCommerce 默认在归档页（分类页）用
<a></a>，详情页才用<button></button>，所以同一套 CSS 在不同页面表现不一致 - 按钮被动态插入（如 AJAX 加载商品列表），但你的 CSS 是页面加载时写的，没覆盖到新节点
避免 CSS 优先级被覆盖的写法
别只写 .add_to_cart_button { background: #007bff; } —— 很可能被主题自带的 .woocommerce a.button { background: #222 !important; } 干掉。稳妥做法：
- 用更具体的选择器，比如
.woocommerce ul.products li.product .add_to_cart_button或body .add_to_cart_button:not(.disabled) - 加
!important是下策，但临时验证有效：background-color: #007bff !important; - 把自定义 CSS 放在主题
style.css底部，或通过 WordPress 后台「外观 → 自定义 → 额外 CSS」添加（它会最后加载）
确保按钮 HTML 结构稳定可选中
样式失效常因按钮 DOM 结构被插件/主题悄悄改了。比如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 原以为按钮有
class="add-to-cart"，结果插件输出的是class="single_add_to_cart_button" - 按钮被包裹在
<div class="cart-button-wrapper"> 里，但你没考虑这层嵌套，导致 <code>margin或display设置错位 - 移动端按钮被 JS 动态替换为
<span></span>或隐藏后重绘，原始 CSS 失效 - 如果
display是none，按钮彻底不在渲染树里，任何样式都无效；查是否有 JS 执行了el.style.display = 'none'或父容器设了display: none - 如果
visibility是hidden，按钮占位但透明，:hover也失效；真机上还可能影响可访问性（屏幕阅读器仍能读） - 某些主题对禁用状态用
opacity: 0.5+pointer-events: none，此时按钮不可点，但样式看似“生效”了
解决办法：固定使用 data 属性做钩子，例如统一给按钮加 data-cart-button，然后写 [data-cart-button] { ... } —— 这比依赖 class 名更抗干扰。
注意 display 和 visibility 的隐性影响
按钮“看不见”不等于“没样式”。检查开发者工具的 Computed Styles 面板：
最易被忽略的是：WooCommerce 的库存为 0 时，按钮自动加 disabled 属性并切换 class，但部分主题 CSS 没定义 .add_to_cart_button.disabled 状态，导致样式回退到浏览器默认，看起来像“失效”。
