针对特定 WooCommerce 产品页面上的特定 div 以自定义 css答案

【问题标题】：Targeting specific div on specific WooCommerce product pages to customize css针对特定 WooCommerce 产品页面上的特定 div 以自定义 css
【发布时间】：2017-12-16 07:43:07
【问题描述】：

我正在使用 Wordpress 和 WooCommerce 为我的客户构建网站。对于每个产品页面，我都设置了两组链接（按钮、二级菜单），以允许用户访问其他产品类别页面。当用户在某个产品页面上时，我希望某些链接自动成为特定的颜色和重量（就像一个活动状态，但不必先点击链接，我想类似于面包屑来显示用户在哪里他们正在查看的产品属于哪个/类别）。

我一直在尝试针对特定链接的 post-id 和 div 进行 css 更改，但它不起作用。非常感谢任何帮助！

这是我用来定位特定二级菜单链接的 css：

#menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

这可行，但它当然会在所有页面上更改此菜单项。我希望它只出现在特定的产品页面上。

这个我也试过了，还是不行：

.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

该网站位于http://www.hoptri.d-gecko.com

再次感谢您的帮助！提前致谢！

【问题讨论】：

我要定位的网站页面是单个产品页面，例如此页面 (hoptri.d-gecko.com/vi/http:/hoptri.d-gecko.com/san-pham/…)
这不适用于目标正文：“.body.post-id-766 #menu-item-1886 > a “这将是“body.post-id-766 #menu-item-1886 > a " 注意 ".body" 与 "body" 的区别？有你的问题。 :)
感谢 rgdesign，我试过了，但它仍然不影响链接。我是否可能需要在 css 中包含父 div？
嘿 rgdesign，我接受了您的更正并将“post-id”更改为“postid”，它成功了！谢谢一百万！

标签： php css wordpress woocommerce product

【解决方案1】：

您可以使用 body_class WordPress 过滤钩子和选择的条件标签添加一些您想要的其他类，例如以下示例：

add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
    if ( is_product() ) {
        $classes[] = 'product-single-pages';
    } elseif( is_product() && is_single( array( 17, 19, 1, 11 ) )  {
        $classes[] = 'product-single-pages-2';
    }
    return $classes;
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

此代码已经过测试并且可以工作

因此，您将能够在 CSS 规则中使用该类选择器，例如（假示例）：

body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }

body.product-single-pages #menu-item-1886 > a { color: green !important; }

body.product-single-pages2 #menu-item-1886 > a { color: red !important;  }

WooCommerce 在 body 类中注入了一些特定的类，如这个 html 示例：

 <body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">

所以你也可以在你的 css 中使用这个类选择器：

单一产品
woocommerce
woocommerce 页面
woocommerce 活跃

例如这样：

body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
     color: blue !important; 
}

对条件标签的引用：

【讨论】：

感谢您的帮助，此解决方案完美运行！