每个产品类别的列的自定义 CSS

Question

我目前正在使用自定义 CSS 将我的显示列布局演变为 4 个。但是我想根据我的产品类别更改此列布局（某些类别的产品数量不同）

www.tattiniboots.com/shop 你可以看到 4 栏布局。但是，例如，在“附件页面”上，我想要一个 2 列布局

请查看下面的 css 以了解我当前使用的 4 列布局

我尝试过使用页面和帖子 ID 以及类别 ID，但它们不起作用

.page-id-5538 .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
    margin: 0 3.5% 2em 0;
}
.page-id-5538 .woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
    clear: none;
    margin: 0 0 1 0;
}
.page-id-5538 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    padding-top: 5%;
    width: 21%;
} 

Answer 1

默认情况下，WordPress 会为类别、页面和其他内容的 body 标签添加一个唯一的类。只需使用该类来定位您需要的类别。

例如，附件页面在正文term-accessories上有这个类。

所以要为该页面添加样式，您可以执行以下操作...

.term-accessories ul.products li.product {
    width: 50%;
} 

注意：如果您在浏览器中点击 f12，它将打开检查器工具，您可以使用该工具在任何页面的 body 标签上查找类。

注意 2：如果这仍然“不起作用”，请使用上述工具检查您正在应用 CSS 的元素。您可能只需要更具体的样式来覆盖已经应用的样式。

作为最后的手段，您可以尝试添加 !important 来覆盖任何样式，但不建议这样做。

例如...

.term-accessories ul.products li.product {
    width: 50% !important;
} 

Answer 2

答案就在这里：

.term-79 ul.products li.product {
    ~ formatting values here ~
}