css - 在 WooCommerce/WordPress 中使用 CSS 定位产品属性

Question

我正在尝试定位在运行 WooCommerce 的 WordPress 安装上提供的产品的特定属性。具体来说，我正在尝试定位产品价格和产品小计。

我找到了我认为是产品 ID 类“postid-1539”的内容，并且我找到了需要调整“.product-price”和“.product-subtotal”的属性。但我无法专门调整特定产品的属性以显示任何不同内容。

我应该用钩子(Hook)和过滤器来解决这个问题吗？我认为 CSS 是最简单的方法。

我的正确和非工作代码看起来像这样

.postid-1539 .product-price {display;none:}

哈普。 :P

Answer 1

考虑到定位一个元素，你的意思是选择一个元素来改变它的样式。我可以给你这个解决方案:

.shop_table .product-price{ /* Font color of price is made green */
     color:Green;
}

.shop_table .quantity input.input-text{ /* Background color of quantity text box is made green */
     background:Green;
     color:#FFFFFF;
}

请记住，您可以使用 space 选择父元素内的子元素，如下所示:[parentTag/#parentId/.parentClass][SPACE][childrenTag/.childrenClass]，在您的示例中是 .shop_table .product-price。其中 .shop_table 是父元素的类，.product-price 是子元素。所以我们按类别选择它们，中间有一个空格。

但是要选择 input 元素 with class .input-text，您必须像这样连接两者:input。 input-text 将仅更改 .input-text 类的 input 元素，但不会影响其他 input 元素其他类。

要更好地了解 CSS 选择器，请访问 this链接。