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;
}

我只希望第一个价格（正常价格）为黑色......另一个（onsale）应为绿色。现在两者都是黑色的。

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

Answer 1

我不确定你想要的最终布局是什么样的，但是当我从你提供的代码创建一个小提琴时，有一个丑陋的混乱。这似乎部分是由于.amount.floating没有空格（.amount.floating .amount:first-child）所致。

要使线条变为绿色，请执行以下操作：

 ins .amount {
    color: green;
 }

JS Fiddle Demo

Answer 2

.amount.floating ins span { color: green; }

Answer 3

       .amount.floating .amount:first-child {
        background-color:#000000;
        }

        .amount.floating ins span.amount {
         background-color: #98B827 !important;
         }

这是有效的

样式跨越ins和del标签

3 个答案:

JS Fiddle Demo