材料设计轻量级徽章如何改变颜色

Question

我正在使用Material Design Lite（getmdl.io）来开发我的网页应用程序。我有一个带有通知数量徽章的卡片。

我尝试了以下CSS代码，但没有产生任何变化：

.mdl-badge {
  background: #FF3D00;
}

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

- Omar Sherif

---

你能否将带有通知徽章的卡片的HTML包含进来吗？ - Trent

Answer 1

“Material badge”实际上是应用为::after CSS 伪元素。

您可以编写一个CSS选择器来更改徽章的背景颜色，如下所示：

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

---

注意还使用了一个属性选择器；在这里了解更多信息：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors*

- Trent

---

谢谢，它起作用了...我认为我应该学习更多关于 CSS 选择器的内容。 - Omar Sherif

希望我提供的资源能够对你有所帮助！ - Trent