在改一個項(xiàng)目的時候卻遇到了一個莫名其妙的屬性：text-decoration，這個屬性，其實(shí)就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會用在移除超鏈接的底線、或一些特殊強(qiáng)調(diào)的效果里頭，但是這么容易的屬性，為什么會莫名其妙呢？就讓我們繼續(xù)看下去~

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、龍華網(wǎng)絡(luò)推廣、微信小程序開發(fā)、龍華網(wǎng)絡(luò)營銷、龍華企業(yè)策劃、龍華品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供龍華建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

項(xiàng)目里遇到的問題

在我的項(xiàng)目里頭遇到的問題如下，一個div里頭包了一個span，我要“除了這個span之外，其他所有的文字都有底線”，通常看到這個問題一定覺得很簡單，只要照下面的CSS寫法一定可以達(dá)成：

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

理論上應(yīng)該前一段會有底線，后一段會沒有底線，但是實(shí)際上卻是一條底線通到底…..

不過我不信邪，怕是哪里CSS權(quán)重出了問題，直接加上萬惡的important試試看，結(jié)果發(fā)現(xiàn)結(jié)果還是一模一樣！天呀！是見到鬼了嗎！

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

由于實(shí)在是太詭異了，必須要查明原因，于是我換個角度思考，來改一下顏色試試看吧！一改才發(fā)現(xiàn)不得了，為什么底線會是紅色的呀？！

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

text-decoration屬性定義

看到這邊我已經(jīng)大概知道原因了，最有可能的原因應(yīng)該就是出在text-decoration這個屬性的定義，經(jīng)過一番追根究柢，總算看到W3C的說法，主要是因?yàn)閠ext-decoration會把整個父元素加上底線，而整個父元素，當(dāng)然就包含了子元素，因?yàn)橥瑯宇伾木壒?，就以為子元素也被加上底線了，（實(shí)際上子元素沒有被加上底線），不過后來又看了這個專門分析兼容性問題的網(wǎng)站說明，其實(shí)text-decoration會根據(jù)不同的display屬性，而決定父元素的底線是否延伸，舉例來說吧！如果今天我把span的display改成inline-block，就會得到不同的結(jié)果：

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

小結(jié)

不過由于各家瀏覽器的渲染不同，加上已經(jīng)明白了個中原理，這里就不做太多的測試，只要記得下次如果又遇到這種問題，可能就是父元素和子元素互相干擾所造成，自己也要特別留心。最后，好像也可以利用這種方法，做出莫名其妙的效果…
HTML

    真是很莫名其妙的效果

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

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

這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計模式】到移動端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)