Как стилизовать цену цвета в интернет-магазине

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

Кажется, что в вашей HTML-разметке есть закрывающий тег l p, так что вы можете использовать предыдущий селектор тега элемента.

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

Answer 3

Просто определите класс .red {color: red} и примените его к вашему HTML условно, это можно легко сделать с помощью angular.Вы также можете применить CSS условно.Подробнее здесь