如何仅修改WooCommerce单商品页无价格商品的价格样式

• 样式仅在WooCommerce单商品详情页生效，仅针对无价格商品调整价格展示样式
• 样式不得覆盖商品归档页、单商品页底部相似商品模块等全站其他位置的商品价格元素

原有CSS未限定页面生效范围，选择器匹配逻辑过宽，导致全站所有符合类名规则的价格模块都被样式影响，无法精准命中目标场景，原有代码如下：

.hide-larger-price .price :not(.price) {
    padding: 5px;
    background-color: #1975ff;
    color: white;
    border-radius: 6px;
    font-size: 17px;
}

WooCommerce会给单商品页的body标签自动添加single-product专属类名，单商品页的主价格区域位于商品摘要容器.summary.entry-summary下，和归档页、相似商品模块的价格元素完全隔离，基于这个规则写的CSS可以精准限定生效范围：

/* 仅作用于单商品页主区域的无价格商品，不影响其他位置 */
body.single-product .summary.entry-summary > .price.hide-larger-price,
body.single-product .summary.entry-summary > .price:empty {
    padding: 5px;
    background-color: #1975ff;
    color: #fff;
    border-radius: 6px;
    font-size: 17px;
}

• 选择器里的>符号用于限定仅匹配摘要容器下的一级价格元素，完全排除相似商品、推荐商品模块嵌套在其他容器内的价格元素
• 如果你的无价格商品是通过自定义逻辑给价格容器加了hide-larger-price类，第一段选择器会命中；如果是原生WooCommerce无价格输出的空价格容器，:empty伪类会自动匹配

内容的提问来源于stack exchange，提问作者VVV