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

【问题标题】：How to style price color on webshop sale price如何在网上商店销售价格上设置价格颜色
【发布时间】：2019-03-18 13:45:50
【问题描述】：

如何更改以使销售价格为红色而正常价格仍为黑色？ - 我尝试使用 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>

【问题讨论】：

第一个 html 块中的开头<p> 在哪里？
CSS 在哪里？
您可以使用 Angular 中的 ngClass 指令根据您的条件给出一个类
尝试将 sale / normal 添加到要着色的元素类中，然后使用 querySelectorAll 找到这些元素，遍历数组并设置颜色，如下所示：element.style.color = "red"

标签： javascript css angular webshop

【解决方案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>

【讨论】：

谢谢，不幸的是，这似乎不起作用 - 抱歉，我现在插入了 opning 标签
@Pete，它在您的代码或此处给出的答案中不起作用吗？
你能看一下吗，我真的很努力，但是我不能让它在产品下工作
@Pete，基于 HTML 的结构证明了该解决方案。如果结构不匹配，选择器将失败并且不会实现任何样式。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

@Pete 的 CSS 是否在正确的位置？还是它给错误的物品上色？我只问是因为在我的电脑上我看到“250,00 DKK”是红色的。旁边的 350,000 被划掉了。
对不起，我已经插入了 opning 标签
问题是正常价格和销售价格都是红色的 - 可能需要 Javascript
@Pete man 很遗憾听到这个消息！ ~ 如果 span.m-productlist-price 元素前面有 s.m-productlist-price-before-discount，则应该只导致它变成红色
s.m-productlist-price-before-discount - 更改预售价格