材质设计精简版徽章更改颜色

Question

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

我尝试了这个 css 代码，但没有更改：

.mdl-badge {
background: #FF3D00;
}

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

Answer 1

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

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

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

---

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