css - Material Design Lite 徽章变色

Question

我正在为我的网络应用程序使用 Material Design Lite (getmdl.io)，我有一张带有通知数量徽章的卡片。

我尝试了这个 css 代码但没有改变:

.mdl-badge {
  background: #FF3D00;
}

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

Answer 1

Material 徽章实际应用为 ::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 *