国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 搞怪的 text-decoration

Mertens / 1684人閱讀

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

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


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

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

相關文章

  • CSS 搞怪的 text-decoration

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

    TANKING 評論0 收藏0

  • 關于contenteditable屬性

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

    ssshooter 評論0 收藏0

  • JavaScript 類型轉換深度學習

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

    microcosm1994 評論0 收藏0

  • 奇葩程序寫的神一樣的注釋，被老板看見會不會開出呢？

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

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

Mertens

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<