CSS行通過行爲不我希望它太

好吧，我有一個簡單的問題的方式也許我失去了一些東西愚蠢的在這裏，但我有HTMLCSS行通過行爲不我希望它太

<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/

我肯定我俯瞰一些愚蠢的事在這裏，但請點我給我的錯誤

來源

2014-03-26 Travis

我感謝每個人的快速反應我是有腦放屁的時刻，得到了，如果我能標誌着它們都作爲正確的我會把它解決了！ – Travis

因爲您不能「取消」來自父元素的直通。當然，你可以將它們分成兩個兄弟姐妹跨度。

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/

來源

2014-03-26 19:00:22 Shomz

我想我今天一直在看代碼太長了，謝謝我知道這是愚蠢的！感謝您指出！我也會接受答案，因爲我也允許我 – Travis

不要擔心，它發生在每個人身上。你應該總是以自然的語義來理解你自己的東西 - 然後編寫適當的CSS就沒有問題了。 – Shomz

你的CSS告訴它通過.salePrice放線，這是它在做什麼，孩子<span>和所有。

這樣做的更「標準」的方法是：

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

然後，您可以獨立樣式的新老價格。

來源

2014-03-26 19:00:03

它具有'del'和'ins'元素的更多語義來表示舊值和新值。 – zzzzBov

實際上，「標準」（HTML5 CR）爲這樣的上下文提供了's'元素：http://www.w3.org/TR/html5/text-level-semantics.html#the-s-element –

這是因爲你的跨度的嵌套，外strikethru覆蓋你內心的跨度。 UNNEST他們並分別應用樣式，這樣你就不必使用重要：

<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/

來源

2014-03-26 19:03:33 jlblatt

，如果你設置嵌套子作爲內聯塊，文字修飾的應用，因爲佈局是某種觸發。 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 */ 
}

來源

2014-03-26 19:19:36

CSS行通過行爲不我希望它太

回答

相關問題