在 WooCommerce/WordPress 中使用 CSS 定位产品属性答案

【问题标题】：Target a product's attribute with CSS in WooCommerce/WordPress在 WooCommerce/WordPress 中使用 CSS 定位产品属性
【发布时间】：2016-07-24 19:35:45
【问题描述】：

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

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

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

我的正确和非工作代码如下所示

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

暂停。 :P

【问题讨论】：

.postid-1539、.product-price 是同一个元素的类吗？
我认为是这样，但可能并非如此。如果您不介意看一下，这是 url，redbaycoffee.com/product/free-sample 如果您单击“立即订阅”，您将被带到购物车，在那里您可以检查并可能帮助我。我只想定位该特定产品旁边的价格和总数。谢谢！

标签： css class attributes woocommerce

【解决方案1】：

考虑到targeting 一个元素，你的意思是selecting 一个元素来改变它的样式。我可以给你这个解决方案：

.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 是子元素。所以我们按他们的班级选择了他们，中间是space。

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

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

【讨论】：