搞怪的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;
}

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術