CSS 搞怪的 text-decoration

今天在改一個項目的時候卻遇到了一個莫名其妙的屬性：text-decoration，這個屬性，其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了，一般會用在移除超連接的底線、或一些特殊強調的效果裏頭，可是這麼容易的屬性，爲何會莫名其妙呢？就讓咱們繼續看下去~

項目裏遇到的問題

在個人項目裏頭遇到的問題以下，一個div裏頭包了一個span，我要「除了這個span以外，其餘全部的文字都有底線」，一般看到這個問題必定以爲很簡單，只要照下面的CSS寫法必定能夠達成：

div{
    font-size:20px;
    text-decoration: underline;
}
div span{
    text-decoration: none;
}

理論上應該前一段會有底線，後一段會沒有底線，可是實際上倒是一條底線通到底…..

不過我不信邪，怕是哪裏CSS權重出了問題，直接加上萬惡的important試試看，結果發現結果仍是如出一轍！天呀！是見到鬼了嗎！

div{
    font-size:20px;
    text-decoration: underline;
}
div span{
    text-decoration: none!important;
}

因爲實在是太詭異了，必需要查明緣由，因而我換個角度思考，來改一下顏色試試看吧！一改才發現不得了，爲何底線會是紅色的呀？！

div{
    font-size:20px;
    color:#f00;
    text-decoration: underline;
}
div span{
    color:#00f;
    text-decoration: none!important;
}

text-decoration屬性定義

看到這邊我已經大概知道緣由了，最有可能的緣由應該就是出在text-decoration這個屬性的定義，通過一番追根究柢，總算看到W3C的說法，主要是由於text-decoration會把整個父元素加上底線，而整個父元素，固然就包含了子元素，由於一樣顏色的緣故，就覺得子元素也被加上底線了，（實際上子元素沒有被加上底線），不事後來又看了這個專門分析兼容性問題的網站說明，其實text-decoration會根據不一樣的display屬性，而決定父元素的底線是否延伸，舉例來講吧！若是今天我把span的display改爲inline-block，就會獲得不一樣的結果：

div{
    font-size:20px;
    color:#f00;
    text-decoration: underline;
}
div span{
    display:inline-block;
    color:#00f;
    text-decoration: none!important;
}

小結

不過因爲各家瀏覽器的渲染不一樣，加上已經明白了箇中原理，這裏就不作太多的測試，只要記得下次若是又遇到這種問題，可能就是父元素和子元素互相干擾所形成，本身也要特別留心。最後，好像也能夠利用這種方法，作出莫名其妙的效果…
HTML

<div>
    <span><span><span>真是很莫名其妙的效果<span></span></span>
</div>

CSS

div{
    font-size:30px;
    color:#f00;
    text-decoration:overline;
}
div span{
    color:#00f;
    text-decoration: line-through;
}
div span span{
    color:#0f0;
    text-decoration: underline;
}
div span span span{
    color:#000;
    text-decoration: none;
}