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

資訊專欄INFORMATION COLUMN

css權(quán)重與常見布局（1）

CoderStudy / 2011人閱讀

摘要：實(shí)戰(zhàn)例題某廠前端工程師筆試題基于以下的結(jié)構(gòu)和樣式，文本的顏色是計(jì)算權(quán)重權(quán)重最大因?yàn)樗晕谋撅@示的這種顏色

CSS的選擇器類型與權(quán)重值

通配符選擇器 權(quán)重值為 0

元素選擇器，和偽元素(例如::before) 權(quán)重值為 1

類選擇器(class)，屬性選擇器，偽類(:hover) 權(quán)重值為 10

ID選擇器 權(quán)重值為 100

行內(nèi)樣式 權(quán)重值為 1000

！important 權(quán)重值比前5個(gè)都大，可以說無窮大

tips:

！important的權(quán)重最大，但是它可以被權(quán)重更大的！important所覆蓋

行內(nèi)樣式 總會(huì)覆蓋外部樣式表的任何樣式(除了!important)

幾種權(quán)重值不同的選擇器作用在同一個(gè)元素上，以權(quán)重值大的css樣式規(guī)則生效

幾種權(quán)重值相同的選擇器作用在同一個(gè)元素上，以后面出現(xiàn)的選擇器的css樣式規(guī)則生效

無論使用多少個(gè)權(quán)重低的選擇器夠比不過一個(gè)權(quán)重值高的選擇

如果有!important那么相加的那些無論多權(quán)重高就不管用，如果有max-height/max-width那么!important不管用，如果同時(shí)有min-height/min-width和 max-height/max-width，那么max-height/max-width的不管用

口訣：從0開始，一個(gè)行內(nèi)樣式+1000，一個(gè)id+100，一個(gè)屬性選擇器/class或者偽類+10，一個(gè)元素名，或者偽元素+1

min-height/min-width > max-height/max-width > !important > 行內(nèi)樣式 > ID選擇器 > 類選擇器、屬性選擇器、偽元素和偽類選擇器 > 元素選擇器 > 通用選擇器
權(quán)重的計(jì)算方法

div p h3 ---> 0,0,0,3 所以此時(shí)h3標(biāo)簽的權(quán)重值為3， 因?yàn)閐iv,p,h3這些都是標(biāo)簽選擇器（權(quán)重值為1）


    

        
xxxx

#par .sub h3 ---> 0,1,1,1 此時(shí)的h3標(biāo)簽的權(quán)重值為111=100+10+1 (依次類推)


    
 
        
xxxx

要注意的一點(diǎn)就是如前面說到的那樣，數(shù)位沒有進(jìn)位： 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是0,0,1,0，所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。

實(shí)戰(zhàn)例題(某廠前端工程師筆試題)

基于以下的HTML結(jié)構(gòu)和CSS樣式，文本Dijkstra的顏色是？

    
    
  • Martin Fowler
    • 
    
  • Dijkstra
    • 

 

ul #related span {
    color:red;
}
#favorite .highlight{
     color:orange;
}
.highlight{
    color:black;
}

計(jì)算權(quán)重：
（1）ul #related span ---> 0,0,0,1 + 0,1,0,0 + 0,0,0,1 =0,1,0,2 ---> 102 red
(2) #favorite .highlight ---> 0,1,0,0 + 0,0,1,0 = 0,1,1,0 ---> 110 orange (權(quán)重最大)
(3) .highlight ---> 0,0,1,0 = 10 black

因?yàn)?10 > 102 > 10 所以文本Dijkstra顯示的 Orange這種顏色

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

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

相關(guān)文章

  • CSS

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進(jìn)行定位。雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。 1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 有兩種，?IE 盒子模型、W3C 盒子模型； 盒模型：?內(nèi)容(content)、填充(padding)、邊界(margin)、?邊框(border)；區(qū)? 別：?IE的cont...

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

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

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

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

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

  • CSS常見問題小結(jié)

    摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁面不夠純凈，文件體積過大不利于，后期維護(hù)成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)；比如： 一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋 在制作頁面的時(shí)...

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

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

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

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

0條評(píng)論

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