成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS 搞怪的 text-decoration

TANKING / 2301人閱讀

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

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

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

在我的項(xiàng)目里頭遇到的問題如下，一個(gè)div里頭包了一個(gè)span，我要“除了這個(gè)span之外，其他所有的文字都有底線”，通?？吹竭@個(gè)問題一定覺得很簡單，只要照下面的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í)在是太詭異了，必須要查明原因，于是我換個(gè)角度思考，來改一下顏色試試看吧！一改才發(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這個(gè)屬性的定義，經(jīng)過一番追根究柢，總算看到W3C的說法，主要是因?yàn)閠ext-decoration會把整個(gè)父元素加上底線，而整個(gè)父元素，當(dāng)然就包含了子元素，因?yàn)橥瑯宇伾木壒剩鸵詾樽釉匾脖患由系拙€了，（實(shí)際上子元素沒有被加上底線），不過后來又看了這個(gè)專門分析兼容性問題的網(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)明白了個(gè)中原理，這里就不做太多的測試，只要記得下次如果又遇到這種問題，可能就是父元素和子元素互相干擾所造成，自己也要特別留心。最后，好像也可以利用這種方法，做出莫名其妙的效果…
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;
}


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116397.html

相關(guān)文章

  • CSS 搞怪的 text-decoration

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

    Mertens 評論0 收藏0

  • 關(guān)于contenteditable屬性

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

    ssshooter 評論0 收藏0

  • JavaScript 類型轉(zhuǎn)換深度學(xué)習(xí)

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

    microcosm1994 評論0 收藏0

  • 奇葩程序?qū)懙纳褚粯拥淖⑨專焕习蹇匆姇粫_出呢？

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

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<