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

資訊專欄INFORMATION COLUMN

css權重與常見布局（1）

CoderStudy / 1996人閱讀

摘要：實戰例題某廠前端工程師筆試題基于以下的結構和樣式，文本的顏色是計算權重權重最大因為所以文本顯示的這種顏色

CSS的選擇器類型與權重值

通配符選擇器 權重值為 0

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

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

ID選擇器 權重值為 100

行內樣式 權重值為 1000

！important 權重值比前5個都大，可以說無窮大

tips:

！important的權重最大，但是它可以被權重更大的！important所覆蓋

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

幾種權重值不同的選擇器作用在同一個元素上，以權重值大的css樣式規則生效

幾種權重值相同的選擇器作用在同一個元素上，以后面出現的選擇器的css樣式規則生效

無論使用多少個權重低的選擇器夠比不過一個權重值高的選擇

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

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

min-height/min-width > max-height/max-width > !important > 行內樣式 > ID選擇器 > 類選擇器、屬性選擇器、偽元素和偽類選擇器 > 元素選擇器 > 通用選擇器
權重的計算方法

div p h3 ---> 0,0,0,3 所以此時h3標簽的權重值為3， 因為div,p,h3這些都是標簽選擇器（權重值為1）


    

        
xxxx

#par .sub h3 ---> 0,1,1,1 此時的h3標簽的權重值為111=100+10+1 (依次類推)


    
 
        
xxxx

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

實戰例題(某廠前端工程師筆試題)

基于以下的HTML結構和CSS樣式，文本Dijkstra的顏色是？

    
    
  • Martin Fowler
    • 
    
  • Dijkstra
    • 

 

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

計算權重：
（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 (權重最大)
(3) .highlight ---> 0,0,1,0 = 10 black

因為110 > 102 > 10 所以文本Dijkstra顯示的 Orange這種顏色

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

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

相關文章

  • CSS

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

    Lyux 評論0 收藏0

  • 容易忽略的七個CSS知識點

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

    chanthuang 評論0 收藏0

  • 容易忽略的七個CSS知識點

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

    elina 評論0 收藏0

  • CSS常見問題小結

    摘要：常見問題小結一行內樣式內聯樣式外部樣式行內樣式代碼寫在具體網頁中的一個元素內比如一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時候需要為很多的標簽設置屬性，所以會導致頁面不夠純凈，文件體積過大不利于，后期維護成本高。 CSS常見問題小結 一、行內樣式、內聯樣式、外部樣式 行內樣式：代碼寫在具體網頁中的一個元素內；比如： 一般不需要擔心樣式優先級與樣式覆蓋 在制作頁面的時...

    ivyzhang 評論0 收藏0

  • CSS學習筆記(十六) CSS最佳實踐之可維護性篇

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

    newtrek 評論0 收藏0

發表評論

0條評論

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