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

資訊專欄INFORMATION COLUMN

詳解 CSS 屬性 - 優(yōu)先級(jí)問題

ZoomQuiet / 670人閱讀

摘要：當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問題了。那么應(yīng)該如何處理優(yōu)先級(jí)問題呢，下面我總結(jié)了一些解決優(yōu)先級(jí)問題的常用法則。如內(nèi)部樣式外部樣式內(nèi)聯(lián)樣式此時(shí)顯示的優(yōu)先級(jí)是。

當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問題了。那么應(yīng)該如何處理 CSS 優(yōu)先級(jí)問題呢，下面我總結(jié)了一些解決 CSS 優(yōu)先級(jí)問題的常用法則。

樣式距離

我們可以通過使用外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式等方法給元素添加指定的樣式，此時(shí)的優(yōu)先級(jí)是:

外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式

這個(gè)應(yīng)該比較容易理解，也就是說離元素距離越近的樣式優(yōu)先級(jí)越大。如：


 //外部樣式(color:green)

my color
//內(nèi)聯(lián)樣式

此時(shí)顯示的優(yōu)先級(jí)是 red > blue > green。所以 my color 顯示為紅色。

特殊的計(jì)算方法

假設(shè)有下面這段代碼：




  
my color

我們面對(duì)下面的 css，如何判斷優(yōu)先級(jí)呢？

這里介紹一種特殊的計(jì)算方法：

元素, 偽元素: 1 – (0,0,0,1)

類, 偽類, 屬性: 1 – (0,0,1,0)

ID: 1 – (0,1,0,0)

內(nèi)聯(lián)樣式: 1 – (1,0,0,0) 

  
這里的屬性指的是：


  效果如下：

優(yōu)先級(jí)從上往下依次增加，至于如何計(jì)算，同樣舉例說明：

p: 1個(gè)元素– (0,0,0,1)

div: 1個(gè)元素 – (0,0,0,1)

#idSelector: 1個(gè)ID – (0,1,0,0)

div#idSelector: 1個(gè)元素, 1個(gè)ID – (0,1,0,1)

div#idSelector p: 2個(gè)元素, 1個(gè)ID– (0,1,0,2)

div#idSelector p.classSelector: 2個(gè)元素, 1個(gè)類, 1個(gè)ID – (0,1,1,2)

所以現(xiàn)在我們?cè)賮砜瓷厦娴睦樱?/p> 

  div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
  #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

由于優(yōu)先級(jí)上 (0,1,0,1) > (0,0,1,2)，所以我們知道最后顯示的顏色為紅色。

繼承

繼承是個(gè)比較好理解的概念，即子元素會(huì)繼承父元素的樣式。例如：


  
my color

上例中的 span 會(huì)繼承父元素 div 的樣式。但不是所有的屬性都會(huì)默認(rèn)使用繼承的方式，比如 margin 和 padding 屬性。例如：


  
my color

此時(shí)，元素 p 并不會(huì)繼承父元素 div 的 margin 和 padding 樣式，除非你這么做：


  
my color
總結(jié)

1.首先找到所有作用在元素上的樣式。（不要忽略來自繼承的樣式）
2.計(jì)算樣式的作用距離，距離越近，優(yōu)先級(jí)越大。
3.使用特殊的計(jì)算方法來判斷同距離內(nèi)的樣式。
4.如果計(jì)算后的結(jié)果相同，那么后聲明的樣式覆蓋先前聲明的樣式。
5.如果某個(gè)樣式中設(shè)置 !important，則無論它的優(yōu)先級(jí)如何，都以該樣式為準(zhǔn)。（除非迫不得已，強(qiáng)烈不建議使用這個(gè)方法，因?yàn)檫@無疑是不符合 css 思想的用法）

參考

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

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

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

相關(guān)文章

  • CSS優(yōu)先級(jí)詳解

    摘要：優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。這些繼承的樣式的優(yōu)先級(jí)永遠(yuǎn)低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠(yuǎn)都要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級(jí)來解決問題而不是。 概念 瀏覽器是通過判斷優(yōu)先級(jí)，來決定到底哪些屬性值是與元素最相關(guān)的，從而應(yīng)用到該元素上。優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。 如何計(jì)算? 優(yōu)先級(jí)是根據(jù)由每種選擇器類型構(gòu)成的級(jí)聯(lián)字串計(jì)算而成的. 它不是一個(gè)對(duì)...

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

  • CSS優(yōu)先級(jí)詳解

    摘要：優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。這些繼承的樣式的優(yōu)先級(jí)永遠(yuǎn)低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠(yuǎn)都要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級(jí)來解決問題而不是。 概念 瀏覽器是通過判斷優(yōu)先級(jí)，來決定到底哪些屬性值是與元素最相關(guān)的，從而應(yīng)用到該元素上。優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。 如何計(jì)算? 優(yōu)先級(jí)是根據(jù)由每種選擇器類型構(gòu)成的級(jí)聯(lián)字串計(jì)算而成的. 它不是一個(gè)對(duì)...

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

  • 性能優(yōu)化詳解

    摘要：幾個(gè)月前面試的時(shí)候問我性能優(yōu)化我可能會(huì)開始背誦雅虎軍規(guī)，加點(diǎn)，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面本文涉及方面有代碼優(yōu)化網(wǎng)絡(luò)請(qǐng)求過程角度入手解析建立鏈接網(wǎng)絡(luò)往返時(shí)延數(shù)據(jù)傳輸網(wǎng)絡(luò)問題角度入手請(qǐng)求數(shù)量流量性能優(yōu)化測(cè)試工具代碼優(yōu)化 幾個(gè)月前面試的時(shí)候問我性能優(yōu)化我可能會(huì)開始背誦雅虎軍規(guī)，加點(diǎn)webp，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面 本文涉及方面有: 代...

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

  • 性能優(yōu)化詳解

    摘要：幾個(gè)月前面試的時(shí)候問我性能優(yōu)化我可能會(huì)開始背誦雅虎軍規(guī)，加點(diǎn)，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面本文涉及方面有代碼優(yōu)化網(wǎng)絡(luò)請(qǐng)求過程角度入手解析建立鏈接網(wǎng)絡(luò)往返時(shí)延數(shù)據(jù)傳輸網(wǎng)絡(luò)問題角度入手請(qǐng)求數(shù)量流量性能優(yōu)化測(cè)試工具代碼優(yōu)化 幾個(gè)月前面試的時(shí)候問我性能優(yōu)化我可能會(huì)開始背誦雅虎軍規(guī)，加點(diǎn)webp，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面 本文涉及方面有: 代...

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

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

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

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

0條評(píng)論

閱讀需要支付1元查看
<