内联CSS无法覆盖WooCommerce回显产品价格的内部样式怎么办

两类CSS规则逻辑共同导致了样式覆盖失效：

• 你在第一个代码块中编写的span.woocommerce-Price-amount.amount属于无范围限制的全局类选择器，会直接命中页面上所有匹配该类名的价格元素（包括第二个产品的价格节点），强制给每个价格内置的span标签设置了#6682e8的颜色。
• CSS优先级规则中，直接作用在目标元素上的样式优先级，永远高于从父元素继承的样式。你在外层div上写的内联color:#FFFFFF属于继承样式，是优先级最低的一档，完全无法覆盖已经被全局类选择器直接设置在价格span上的蓝色。

常见认知误区：很多人以为内联样式的优先级一定高于类选择器，但这个优先级规则仅适用于内联样式直接写在目标元素本身的场景。如果内联样式写在父元素上，本质还是继承值，优先级远低于直接命中子元素的任何选择器规则。

不要编写无范围限制的全局价格样式，给每个产品的价格块增加独立的作用域边界，让样式只对当前块内的价格生效：

1. 调整ID100产品的代码块，给原有样式增加专属父类作为作用域：

   <style>
   .price-block-100 span.woocommerce-Price-amount.amount {
     font-size: 38px;
     color: #6682e8;    
   }      
   </style> 
   <div class="price-block-100">
   <?PHP
   $product_id = 100; 
   $_product = wc_get_product( $product_id );
   echo wc_price($_product->get_price_including_tax(), array('decimals' => 0));
   ?>
   </div>
   

2. 为ID101的产品价格块编写同层级作用域的独立样式，不要依靠父元素的继承值设置颜色：

   <div class="price-block-101">
   <?PHP
   $product_id = 101; 
   $_product = wc_get_product( $product_id );
   echo wc_price($_product->get_price_including_tax(), array('decimals' => 0));
   ?>
   <style>
   .price-block-101 span.woocommerce-Price-amount.amount {
     color: #FFFFFF;
     font-size: 38px;
   }
   </style>
   </div>
   

• 收窄后的选择器会自动提升特异性，完全不需要额外加!important就能稳定覆盖之前的全局规则
• 原有的无范围全局类选择器会顺带覆盖购物车、产品列表页等所有位置的WooCommerce默认价格样式，给后续维护增加不必要的冲突，用独立父类圈定样式作用域后就能完全规避这类问题。

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