Question

有谁知道如何在下面的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;
}

网站网址：https://www.elitekidscoaching.com/camp-booking/

支持

Answer 1

您可以使用nth-child selector来实现这一目标，有许多不同的组合，例如您可以更改所有偶数或奇数产品的颜色，您可以每4个产品做一次，等等。例如：

＆＃13;

ul.products li:nth-child(even) h2 {
  color:red;
}
ul.products li:nth-child(odd) h2 {
  color:green;
}

＆＃13;

<ul class="products columns-4">
  <li><a href="#"><h2>Lorem Ipsum</h2></a></li>
  <li><a href="#"><h2>Lorem Ipsum</h2></a></li>
  <li><a href="#"><h2>Lorem Ipsum</h2></a></li>
  <li><a href="#"><h2>Lorem Ipsum</h2></a></li>
</ul>

＆＃13;

这是一个很好的资源，可以帮助您熟悉它的工作原理：Useful :nth-child Recipes

Answer 2

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

您可以通过以下方式轻松定位这些特定产品：

.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更改为相关帖子并重复。

你也可以通过这种方式进行简化：

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是您的选择，我可以为您指出资源，使颜色随机变亮或变暗。

Answer 3

您可以使用:nth-child伪选择器来实现您想要的效果，例如

.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浏览元素并设置其颜色。

针对单个产品CSS样式

3 个答案: