當(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í)是:

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

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

特殊的計(jì)算方法
假設(shè)有下面這段代碼：

我們面對(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ì)算，同樣舉例說(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#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è)賮?lái)看上面的例子：

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

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

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

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

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

最新評(píng)論