Material Design Lite徽章更改颜色

Question

我正在为我的Web应用程序使用Material Design Lite（getmdl.io），我的卡上有带有通知数量的徽章。

我尝试了此CSS代码，但没有更改：

.mdl-badge {
  background: #FF3D00;
}

我无法更改徽章的颜色，这是框架中的问题吗？

Answer 1

“材料”徽章实际上是作为::after CSS psuedo-element来应用的。

您可以编写CSS选择器来更改徽标的背景颜色，

.mdl-badge[data-badge]:after {
  background-color: black;
  color: white;
}

---

注意，还使用了一个属性选择器；在此处了解有关这些内容的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors *