html - ins 和 del 标签内的样式跨度

Question

我有这个代码:

<span class="price">
    <span class="amount floating">
         <del><span class="amount">275,00&nbsp;kr.</span></del> 
         <ins><span class="amount">149,00&nbsp;kr.</span></ins>
    </span>
</span>

现在我有这个 css:

ul.products li.product .price ins {
    background: none;
    top: 40px;
    position: absolute;
    right: 0px;
    color: #fff;
    padding: 5px 10px;
}
.amount.floating .amount:first-child {
    background-color:#000000;
}
.amount.floating .amount:first-child {
    font-size: 16px;
    position: absolute;
    top: 200px;
    right: 0px;
    background-color: #000000;
    color: #fff;
    padding: 5px 10px;
}

我只希望第一个价格(正常价格)是黑色的...另一个(特价)应该是绿色的。 现在两个都是黑色的。

注意:由于我在 CMS 中工作，我想要一个 CSS 解决方案

Answer 1

我不确定您希望最终布局是什么样子，但是当我根据您提供的代码创建 fiddle 时，出现了一个丑陋的困惑局面。这似乎部分是由于 .amount.floating 没有空格(在 .amount.floating .amount:first-child 中)造成的。

要使线条变为绿色，只需执行以下操作:

 ins .amount {
    color: green;
 }

JS Fiddle Demo