如何移除AngularJS Material菜单中首个md-button的初始背景色？

要移除这个md-icon-button的初始背景色，你可以通过以下几种实用方式调整样式：

方法1：精准CSS覆盖（推荐） #

利用按钮的自定义类dtp-btn-ok结合Angular Material内置的md-icon-button类，编写优先级更高的CSS规则，避免影响页面其他按钮：

/* 移除按钮初始背景色 */
md-menu .dtp-btn-ok.md-icon-button {
  background-color: transparent;
}

/* 可选：移除hover/focus状态的背景色（如果不需要交互反馈） */
md-menu .dtp-btn-ok.md-icon-button:hover,
md-menu .dtp-btn-ok.md-icon-button:focus {
  background-color: transparent;
  /* 也可以保留轻微反馈，比如设为rgba(0,0,0,0.05) */
}

这种方式不用依赖!important，通过父元素md-menu提升了选择器特异性，能精准覆盖目标按钮的默认样式。

方法2：强制覆盖（当方法1不生效时） #

如果组件默认样式优先级过高，直接用!important强制覆盖即可：

.dtp-btn-ok.md-icon-button {
  background-color: transparent !important;
}

/* 同步处理hover/focus状态 */
.dtp-btn-ok.md-icon-button:hover,
.dtp-btn-ok.md-icon-button:focus {
  background-color: transparent !important;
}

小技巧：定位样式来源 #

你可以按下F12打开浏览器开发者工具，选中这个按钮元素，在Styles面板里查看是哪条CSS规则给按钮加了背景色，再针对性编写覆盖规则，这样能更精准地解决问题。

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