CSS的text-decoration問題怎么解決

本篇內容介紹了“CSS的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;

　　}

“CSS的text-decoration問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！