成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 搞怪的 text-decoration

TANKING / 2266人閱讀

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

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

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

在我的項(xiàng)目里頭遇到的問(wèn)題如下，一個(gè)div里頭包了一個(gè)span，我要“除了這個(gè)span之外，其他所有的文字都有底線”，通常看到這個(gè)問(wèn)題一定覺(jué)得很簡(jiǎn)單，只要照下面的CSS寫法一定可以達(dá)成：

div{
    font-size:20px;
    text-decoration: underline;
}
div span{
    text-decoration: none;
}

理論上應(yīng)該前一段會(huì)有底線，后一段會(huì)沒(méi)有底線，但是實(shí)際上卻是一條底線通到底…..

不過(guò)我不信邪，怕是哪里CSS權(quán)重出了問(wèn)題，直接加上萬(wàn)惡的important試試看，結(jié)果發(fā)現(xiàn)結(jié)果還是一模一樣！天呀！是見到鬼了嗎！

div{
    font-size:20px;
    text-decoration: underline;
}
div span{
    text-decoration: none!important;
}

由于實(shí)在是太詭異了，必須要查明原因，于是我換個(gè)角度思考，來(lái)改一下顏色試試看吧！一改才發(fā)現(xiàn)不得了，為什么底線會(huì)是紅色的呀？！

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)過(guò)一番追根究柢，總算看到W3C的說(shuō)法，主要是因?yàn)閠ext-decoration會(huì)把整個(gè)父元素加上底線，而整個(gè)父元素，當(dāng)然就包含了子元素，因?yàn)橥瑯宇伾木壒?，就以為子元素也被加上底線了，（實(shí)際上子元素沒(méi)有被加上底線），不過(guò)后來(lái)又看了這個(gè)專門分析兼容性問(wèn)題的網(wǎng)站說(shuō)明，其實(shí)text-decoration會(huì)根據(jù)不同的display屬性，而決定父元素的底線是否延伸，舉例來(lái)說(shuō)吧！如果今天我把span的display改成inline-block，就會(huì)得到不同的結(jié)果：

div{
    font-size:20px;
    color:#f00;
    text-decoration: underline;
}
div span{
    display:inline-block;
    color:#00f;
    text-decoration: none!important;
}

小結(jié)

不過(guò)由于各家瀏覽器的渲染不同，加上已經(jīng)明白了個(gè)中原理，這里就不做太多的測(cè)試，只要記得下次如果又遇到這種問(wèn)題，可能就是父元素和子元素互相干擾所造成，自己也要特別留心。最后，好像也可以利用這種方法，做出莫名其妙的效果…
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116397.html

相關(guān)文章

  • CSS 搞怪的 text-decoration

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

    Mertens 評(píng)論0 收藏0

  • 關(guān)于contenteditable屬性

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

    ssshooter 評(píng)論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 是一門弱類型語(yǔ)言，剛接觸的時(shí)候感覺(jué)方便快捷（不需要聲明變量類型了耶?。佑|久了會(huì)發(fā)現(xiàn)它帶來(lái)的麻煩有的時(shí)候不在預(yù)期之內(nèi) 呵呵一笑，哪有這么夸張，可能有人看過(guò)這樣一段代碼 ...

    microcosm1994 評(píng)論0 收藏0

  • 奇葩程序?qū)懙纳褚粯拥淖⑨?，被老板看見?huì)不會(huì)開出呢？

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

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<