您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“CSS的text-decoration問題怎么解決”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
項目里遇到的問題
在我的項目里頭遇到的問題如下,一個div里頭包了一個span,我要“除了這個span之外,其他所有的文字都有底線”,通??吹竭@個問題一定覺得很簡單,只要照下面的CSS寫法一定可以達(dá)成:
div{
font-size:20px;
text-decoration: underline;
}
div span{
text-decoration: none;
}
理論上應(yīng)該前一段會有底線,后一段會沒有底線,但是實際上卻是一條底線通到底…..
不過我不信邪,怕是哪里CSS權(quán)重出了問題,直接加上萬惡的important試試看,結(jié)果發(fā)現(xiàn)結(jié)果還是一模一樣!天呀!是見到鬼了嗎!
div{
font-size:20px;
text-decoration: underline;
}
div span{
text-decoration: none!important;
}
由于實在是太詭異了,必須要查明原因,于是我換個角度思考,來改一下顏色試試看吧!一改才發(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的說法,主要是因為text-decoration會把整個父元素加上底線,而整個父元素,當(dāng)然就包含了子元素,因為同樣顏色的緣故,就以為子元素也被加上底線了,(實際上子元素沒有被加上底線),不過后來又看了這個專門分析兼容性問題的網(wǎng)站說明,其實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
<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;
}
“CSS的text-decoration問題怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。