資源描述：
《css優(yōu)先級(jí)問(wèn)題詳解》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。
1、css優(yōu)先級(jí)問(wèn)題詳解當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問(wèn)題了。那么應(yīng)該如何處理css優(yōu)先級(jí)問(wèn)題呢，下面我總結(jié)了一些解決css優(yōu)先級(jí)問(wèn)題的常用法則。樣式距離我們可以通過(guò)使用外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式等方法給元素添加指定的樣式，此時(shí)的優(yōu)先級(jí)是：外部樣式it;內(nèi)部樣式it;內(nèi)聯(lián)樣式這個(gè)應(yīng)該比較容易理解，也就是說(shuō)離元素距離越近的樣式優(yōu)先級(jí)越大。如：代碼如下：It;styletype=〃text/css〃gt;div{color:blue;}//內(nèi)部樣式It:/stylegt;It;linkrel=〃stylesheet〃type=
2、〃text/css〃href="mystyle.ess’’/gt;//夕卜部樣式(color:green)It;divstyle=’’color:red"gt;mycolorlt;/divgt;//內(nèi)聯(lián)樣式此時(shí)顯示的優(yōu)先級(jí)是redgt;bluegt;green。戶斤以mycolor顯示為紅色。特殊的計(jì)算方法假設(shè)有下面這段代碼：代碼如下：It:styletype=〃text/css〃gt;divp.classSelector{color:blue}#idselectorp{color:red}lt;/stylegt;It;divid="idSelect
3、orz/gt:It;pclass=〃classSelector〃gt;mycolorlt;/pgt;It;/divgt;我們面對(duì)下面的css，如何判斷優(yōu)先級(jí)呢？代碼如下：It:styletype=〃text/css〃gt;divp.classSelector{color:blue}ttidselectorp{color:red}It;/stylegt;這里介紹一種特殊的計(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í)從上往下
4、依次增加，至于如何計(jì)算，同樣舉例說(shuō)明：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#idSelectorp:2個(gè)元素，1個(gè)ID-(0,1，0,2)div#idSelectorp.classSelector:2個(gè)元素，1個(gè)類，1個(gè)ID-(0,1，1,2)所以現(xiàn)在我們?cè)賮?lái)看上面的例子：代碼如下：divp.classSelector{color:blue}-(0,0,0,1)+(0,0,0,1)+(0,0,1
5、，0)=(0,0,1,2)ttidselectorp{color:red}-(0,1,0,0)+(0,0,0，1)=(0,1,0,1)由于優(yōu)先級(jí)上(0,l,0,l)gt；(0,0,1,2),所以我們知道最后顯示的顏色為紅色。繼承繼承是個(gè)比較好理解的概念，即子元素會(huì)繼承父元素的樣式。例如：代碼如下：It;divstyle=〃color:recTgt;It;pgt;mycolorlt;/pgt;lt;/divgt;上例中的span會(huì)繼承父元素div的樣式。但不是所有的屬性都會(huì)默認(rèn)使用繼承的方式，比如margin和padding屬性。例如：代碼如下：It;
6、divstyle=〃margin:1Opx;padding:10px"gt;It;pgt;mycolorlt;/pgt:It;/divgt;此時(shí)，元素p并不會(huì)繼承父元素div的margin和padding樣式，除非你這么做：代碼如下：It;divstyle=〃margin:10px;padding:10px〃gt;It;pstyle="margin:inherit;padding:inherit〃gt;mycolorlt;/pgt:1t;/divgt;總結(jié)1.首先找到所有作用在元素上的樣式。（不要忽略來(lái)自繼承的樣式）2.計(jì)算樣式的作用距離，距離越近，
7、優(yōu)先級(jí)越大。3.使用特殊的計(jì)算方法來(lái)判斷同距離內(nèi)的樣式。1.如果計(jì)算后的結(jié)果相同，那么后聲明的樣式覆蓋先前聲明的樣式。2.如果某個(gè)樣式中設(shè)置！important,則無(wú)論它的優(yōu)先級(jí)如何，都以該樣式為準(zhǔn)。（除非迫不得已，強(qiáng)烈不建議使用這個(gè)方法，因?yàn)檫@無(wú)疑是不符合css思想的用法）樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的HTML元素中，在HTML頁(yè)的頭元素中，或在一個(gè)外部的CSS文件中。甚至可以在同一個(gè)HTML文檔內(nèi)部引用多個(gè)外部樣式表。當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)
8、新的虛擬樣式表中，其中數(shù)字4擁有最高的優(yōu)先權(quán)。#8226;瀏覽器缺省設(shè)置#8226;外部樣式表#8226;內(nèi)
