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

Question

我怎样才能改变销售价格为红色而正常价格保持黑色？ - 我用 div 试过。 css - 但似乎我不能只达到销售价格。 看下面的代码

在售产品：

<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

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

请注意：您有一个没有匹配开始标签的结束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 2

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

Answer 3

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

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