如何在网上商店销售价格上设置价格颜色

Question

我该如何更改才能使促销价显示为红色，而正常价格保持为黑色？ - 我试过 div。 css - 不过好像只能打sale price。见下方代码

特价商品：

<div class="prices">
    <s class="is-block m-productlist-price-before-discount" data-ng-bind-html="discount | currency_format">350,00 DKK</s>
    </p>
    <span class="m-productlist-price h5 is-block" data-ng-bind-html="price">250,00 DKK</span>
</div>

非促销产品：

<div class="prices">
    <span class="m-productlist-price h5 is-block" data-ng-bind-html="price">200,00 DKK</span>
</div>

Answer 1

只需定义一个 class .red { color: red } 并将其有条件地应用到您的 html 上，您可以使用 angular 轻松做到这一点。您也可以有条件地应用 css。阅读更多 here

Answer 2

您可以使用 (+) 尝试下一个元素选择器。

请注意：您有一个结束 p 标签没有匹配的开始标签。

.prices p, .prices p+span{
  color: red;
}

<div class="prices">
  <p>
    <s class="is-block m-productlist-price-before-discount" data-ng-bind-html="discount | currency_format">350,00 DKK</s>
  </p>
  <span class="m-productlist-price h5 is-block" data-ng-bind-html="price">250,00 DKK</span>
</div>

<div class="prices">
  <span class="m-productlist-price h5 is-block" data-ng-bind-html="price">200,00 DKK</span>
</div>

Answer 3

您的 HTML 标记似乎有一个单独的 p 结束标记，所以我知道这是从哪里来的，但是您始终可以使用前面的元素标记选择器。

 s.m-productlist-price-before-discount ~ span.m-productlist-price{
      color:red;
 }

如何在网上商店销售价格上设置价格颜色

How to style price color on webshop sale price

javascript

css

angular

webshop