Question

好的，我有一个简单的问题，也许我在这里错过了一些愚蠢的东西，但我有这个小块的HTML

<div class="span2">
  <span class="price flRight salePrice">$11.25 <span>$4.99</span></span>
</div>

使用此CSS

.span2 .salePrice{text-decoration:line-through;}
.span2 .salePrice span{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}

但是为什么第二个跨度的线路通过我添加了重要的并且认为它会被覆盖但是它不是。为什么不参加？

我有一个简单的小提琴设置，有助于http://jsfiddle.net/XJwns/

我确信我在这里忽略了一些愚蠢的事情，但请指出我的错误

Answer 1

你的CSS告诉它通过.salePrice划一条线，这就是它正在做的事情，孩子<span>以及所有。

更“标准”的做法是：

<span class="price flRight salePrice"><del>$11.25</del> <ins>$4.99</ins></span>

然后，您可以独立设置旧价格和新价格。

Answer 2

因为你无法取消＆＃34;来自父元素的直通。当然，你可以将它们分成两个兄弟姐妹。

HTML

<div class="span2">
    <span class="price flRight salePrice">$11.25</span> <span class="other">$4.99</span>
</div>

CSS

.span2 .salePrice{text-decoration:line-through;}
.span2 .other{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}

见这里：http://jsfiddle.net/XJwns/1/

Answer 3

这是因为你的跨度是嵌套的，外部的strikethru覆盖你的内跨。将它们分开并单独应用样式，这样你就不必使用！important：

<div class="span2">
  <span class="price flRight">$11.25</span><span class="salePrice">$4.99</span>
</div>

.span2 .price{text-decoration:line-through;}
.span2 .salePrice {color:#cd202c;font-weight:bold;margin-left:5px;display: block;}

http://jsfiddle.net/UBsm8/1/

Answer 4

如果将嵌套子项设置为内联块，则应用文本修饰，因为以某种方式触发布局。 http://jsfiddle.net/XJwns/4/

要让这个内联框在文本下滑动，你需要父级减小宽度，这更像是一个技巧。

.span2 .salePrice {
    text-decoration:line-through;
}
.span2 .salePrice span {
    color:#cd202c;
    font-weight:bold;
    margin-left:5px;
    text-decoration: none !important;
    display:inline-block;
}
.salePrice {
    display:inline-block;
    width:1em;/* will force to wrap words, boxes in lines */
}

CSS Line通过不按我想要的方式行事

4 个答案: