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

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。了解更多here

Answer 3

您的HTML标记似乎有一个孤独的p结束标记，所以idk在哪里，不过您始终可以使用前面的元素标记选择器。

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