如何为Wordpress Blogroll上的类别按钮分配不同的颜色

Question

我如何为各个类别按钮分配不同的颜色，这些按钮会自动显示在Blogroll上的博客文章标题下？类似于此blogroll上看到的不同按钮颜色。

[我在上面的博客中看到，每个类别都有不同的标识：

• 类别1：.pgafu-post-categories a：nth-​​child（4n + 1）
• 类别2：.pgafu-post-categories a：nth-​​child（4n + 2）
• 类别3：.pgafu后类别a：nth-​​child（4n + 3）
• ...等等...

为任何新类别分配了一个不同的div，而CSS可以轻松控制每个标识的颜色。

但是使用我们正在使用的主题，所有类别按钮只有一个标识：

• 类别1：.element_4 a
• 类别2：.element_4 a
• 类别3：.element_4 a
• ...依此类推...

因此，通过CSS将任何颜色分配给该标识，该颜色都会自动应用于所有类别按钮。没有区别。

如何使每个类别获得不同的div /标识？预先感谢。

Answer 1

由于您没有提供实际的html，所以很难提供特定的解决方案，但是您可以使用nth-of-type()伪选择器，该样式允许样式化同一元素的不同实例。

button{
 color: white
}

button:nth-of-type(1) {
 background: red
}

button:nth-of-type(2) {
 background: blue
}

button:nth-of-type(3) {
 background: green
}

button:nth-of-type(4) {
 background: black
}

<button class="element_4a" type="button"> Button 1</button>
<button class="element_4a" type="button"> Button 2</button>
<button class="element_4a" type="button"> Button 3</button>
<button class="element_4a" type="button"> Button 4</button>