Html 针对个别产品的CSS风格

有人知道如何在下面的CSS中针对特定的产品，以便每个产品都有不同的风格颜色吗

.woocommerce ul.products li.product h3, .woocommerce ul.products li.product h2.woocommerce-loop-product__title, .woocommerce ul.products li.product h2.woocommerce-loop-category__title {
color: #00F;
}

网站网址：

支持

您可以使用来完成此操作，有许多不同的组合，例如，您可以更改所有偶数或奇数产品的颜色，您可以每4个产品进行一次，等等。例如：

ul.products li:n子级（偶数）h2{
颜色：红色；
}
ul.li产品：第n个孩子（奇数）h2{
颜色：绿色；
}

这里没有太多信息。你希望这些颜色是随机的吗？具体的根据不断变化的产品动态生成

通过执行以下操作，您可以轻松定位这些特定产品：

.woocommerce ul.products li.product.post-1052 h3, 
.woocommerce ul.products li.product.post-1052 h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product.post-1052 h2.woocommerce-loop-category__title {
    color: #00F;
}

只需将.post-1052更改为相关的post并重复

您还可以通过以下方式简化：

li.product.post-1052 h3, 
li.product.post-1052 h2.woocommerce-loop-product__title,
li.product.post-1052 h2.woocommerce-loop-category__title {
    color: #00F;
}

li.product.post-1863 h3, 
li.product.post-1863 h2.woocommerce-loop-product__title,
li.product.post-1863 h2.woocommerce-loop-category__title {
    color: #ff0000;
}

.... Keep adding here

如果Sass是您的一个选项，我可以向您指出随机调亮或调暗颜色的资源。

您可以使用伪选择器实现您想要的功能，如

.foobar:nth-child(1) {
    /*some color*/
}

.foobar:nth-child(2) {
    /*some color*/
}

.foobar:nth-child(3) {
    /*some color*/
}

.foobar:nth-child(4) {
    /*some color*/
}

.foobar:nth-child(5) {
    /*some color*/
}

.foobar:nth-child(6) {
    /*some color*/
}

.foobar:nth-child(7) {
    /*some color*/
}

/*and so on*/

---

或者，如果这还不够，您可以使用Javascript遍历元素并设置它们的颜色。

绝对正确。非常感谢你。我尝试了post-2221选项，但从未找到正确的语法。