CSS 搞怪的 text-decoration

TANKING 發布于2019-08-30 15:48 / 2242人閱讀

摘要：最后，好像也可以利用這種方法，做出莫名其妙的效果真是很莫名其妙的效果

今天在改一個項目的時候卻遇到了一個莫名其妙的屬性：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


    真是很莫名其妙的效果

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

GPU云服務器云服務器搞怪 css引入css css _CSS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116397.html

CSS 搞怪的 text-decoration

摘要：最后，好像也可以利用這種方法，做出莫名其妙的效果真是很莫名其妙的效果今天在改一個項目的時候卻遇到了一個莫名其妙的屬性：text-decoration，這個屬性，其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會用在移除超鏈接的底線、或一些特殊強調的效果里頭，但是這么容易的屬性，為什么會莫名其妙呢？就讓我們繼續看下去~ 項目里遇到的問題在我的項目里頭遇到的問題如下，一...

Mertens 2019-08-02 16:16 評論0 收藏0
關于contenteditable屬性

摘要：今天刷刷看看，看到了發說說框，發現居然不是的，百思不得其解圍。后來看到，心想應該就是這個搞怪的吧，百度了下。的解釋是屬性規定元素內容是否可編輯。里面只有或者默認，加個后，等等非輸入標簽都是可以輸入。而且主流瀏覽器都是支持，包括今天刷刷看看，看到了發說說框，發現居然不是textarea的，百思不得其解圍。后來看到contenteditable，心想應該就是這個搞怪的吧，百度了下。w3c的解釋是...

ssshooter 2019-04-23 11:57 評論0 收藏0
JavaScript 類型轉換深度學習

摘要：當一個值為字符串，另一個值為非字符串，則后者轉為字符串。文章出自的個人博客 showImg(https://segmentfault.com/img/bVEWkS?w=3376&h=1312); JavaScript 是一門弱類型語言，剛接觸的時候感覺方便快捷（不需要聲明變量類型了耶！），接觸久了會發現它帶來的麻煩有的時候不在預期之內呵呵一笑，哪有這么夸張，可能有人看過這樣一段代碼 ...

microcosm1994 2019-08-20 11:57 評論0 收藏0
奇葩程序寫的神一樣的注釋，被老板看見會不會開出呢？

摘要：和老婆意見不一致的時候聽她的，意見一致的時候聽我的。但愿老死電腦間，不愿鞠躬老板前奔馳寶馬貴者趣，公交自行程序員。別人笑我忒瘋癲，我笑自己命太賤不見滿街漂亮妹，哪個歸得程序員佛祖保佑永無三結語搞怪的注釋能讓人心情愉快，懷有更好的心情去。一、概述這是寫在前面的話：在開發中的時候，應該、可能、或許會看到有趣的注釋遇到類似的注釋能讓開發更加的有樂趣，我提倡程序猿繼續傳承下去這個美好優良傳統二...

番茄西紅柿 2019-04-23 13:41 評論0 收藏0