如何正确定位WordPress站点特定按钮自定义CSS样式

你之前写的CSS不生效，踩了几个前端自定义样式的常见坑，按下面的方法调整就行：

可直接使用的CSS代码 #

把下面的代码粘贴到WordPress后台「外观-自定义-额外CSS」位置，替换你之前写的无效代码即可：

/* View Cart 按钮绿色背景白字样式 */
div.xoo-cp-container div.xoo-cp-btns a.xoo-cp-btn-vc.xcp-btn {
    background-color: green !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* 如果需要给三个按钮统一设置同款样式，放开下面这段注释即可
div.xoo-cp-container div.xoo-cp-btns a.xcp-btn {
    background-color: green !important;
    background-image: none !important;
    color: #ffffff !important;
}
*/

如果需要单独调整另外两个按钮的样式，替换对应类名即可：

• Checkout按钮对应类名：xoo-cp-btn-ch
• Continue Shopping按钮对应类名：xoo-cp-close

之前写法无效的原因 #

• 选择器权重不足：你之前用的单类、两层类选择器权重低于插件自带的长选择器，哪怕加了!important，如果插件默认样式同样加了!important且选择器层级更长，你的样式会被覆盖。上面的代码从弹窗最外层容器逐层定位，权重足够覆盖插件默认样式。
• 没有清除默认渐变背景：这个弹窗插件的按钮默认用CSS渐变做背景效果，渐变属于background-image属性，你只设置background属性的话，渐变层会盖在你设置的纯色背景上方，视觉上就像样式完全没生效，代码里特意加了background-image: none !important清除默认渐变。
• 存在选择器语法错误：你最后写的a.xoo-cp-btns .xoo-cp-btn-vc是无效选择器——xoo-cp-btns是包裹按钮的外层div的类，不是a标签的类，这个写法根本匹配不到目标按钮。
• 缓存未更新：添加完CSS记得点自定义器顶部的「发布」按钮保存，之后清空站点缓存插件、CDN缓存，再按Ctrl+F5（Windows系统）/Cmd+Shift+R（Mac系统）硬刷新页面查看效果，很多时候不是代码写错了，是本地或服务器缓存还在加载旧版本的页面代码。

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