如何在CSS中定位Shopify商品原价元素并添加删除线？

核心精准选择器 #

直接利用HTML中的自定义属性定位目标元素，避免依赖易复用的类名（如col-span-1、text-md），这是最可靠的方式：

/* 定位带data-price-wrapper属性的容器下的data-compare-price元素 */
[data-price-wrapper] [data-compare-price] {
  text-decoration: line-through !important;
}

高优先级备选方案 #

如果上述选择器仍被其他样式覆盖，可结合元素标签或已知类名提升权重：

• 假设data-compare-price是span标签：

[data-price-wrapper] span[data-compare-price] {
  text-decoration: line-through !important;
}

• 结合你能定位到的col-span-1和text-md类：

.col-span-1.text-md [data-compare-price] {
  text-decoration: line-through !important;
}

验证步骤 #

1. 打开浏览器开发者工具（F12），找到目标原价元素
2. 在Elements面板的Styles标签中手动输入上述选择器，确认样式是否生效
3. 若仍无效，检查是否存在更高优先级的内联样式，可继续叠加父元素属性/类名进一步提升权重

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