如何理解CSS優(yōu)先級(jí)-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何理解CSS優(yōu)先級(jí)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、興山網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、興山網(wǎng)絡(luò)營(yíng)銷、興山企業(yè)策劃、興山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供興山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.chinadenli.net

當(dāng)你將一個(gè)樣式添加到元素上卻發(fā)現(xiàn)不起作用時(shí)，那就是遇到優(yōu)先級(jí)問(wèn)題了。那么應(yīng)該如何處理 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)
這里的屬性指的是：

如何理解CSS優(yōu)先級(jí)

效果如下：

如何理解CSS優(yōu)先級(jí)

優(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)看上面的例子：

代碼如下:

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ì)繼承父元素的樣式。例如：

代碼如下:

<div >
<p>my color</p>
</div>

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

代碼如下:

<div >
<p>my color</p>
</div>

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

代碼如下:

<div >
<p >my color</p>
</div>

總結(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 思想的用法）

樣式表允許以多種方式規(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è)新的虛擬樣式表中，其中數(shù)字 4 擁有高的優(yōu)先權(quán)。

•瀏覽器缺省設(shè)置
•外部樣式表
•內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
•內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。這只是一個(gè)大方面的優(yōu)先級(jí)，在前面文章中我們講過(guò)CSS有很多選擇器，那么對(duì)于同種樣式的CSS，各個(gè)選擇器的優(yōu)先級(jí)又是如何呢？

我們將某一個(gè)CSS看成一個(gè)三位數(shù)，通過(guò)比較數(shù)字的大小來(lái)獲取優(yōu)先級(jí)的高低，那么就會(huì)相當(dāng)簡(jiǎn)單。在這里可以通過(guò)下面的規(guī)則來(lái)定義各個(gè)選擇器對(duì)應(yīng)的數(shù)字。

•百位數(shù)是該選擇器上的id的數(shù)量的總和；
•十位數(shù)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；
•個(gè)位數(shù)是計(jì)算元素(就像table、p、div、*等等)和偽元素(就像:first-line等)；
•如果兩個(gè)選擇器對(duì)應(yīng)的數(shù)字相等，也就是具有同樣的優(yōu)先級(jí)，在樣式表中后面的那個(gè)起作用。
•標(biāo)有"!important"的規(guī)則具有高優(yōu)先級(jí)，例如H1{color:black !importan; font-family:sans-serif}，前景色被標(biāo)為important，這個(gè)前景色具有很高的優(yōu)先級(jí)。但是這種聲明容易引起混亂，因此通常使用得較少。
選擇器數(shù)值

h2 {color:blue;} 1
p em {color:purple;} 1 + 1 = 2
.apple {color:red;} 10
p.bright {color:yellow;} 1 + 10 = 11
p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100

一般我們還可以通過(guò)瀏覽器的插件來(lái)查看，到底哪個(gè)CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我們介紹到當(dāng)優(yōu)先級(jí)相同時(shí)，哪個(gè)CSS起作用取決于所處的位置，通常后面的CSS優(yōu)先級(jí)要高。但是對(duì)于IE瀏覽器，具有相同數(shù)值的動(dòng)態(tài)CSS取決于添加的順序前后，而不是添加的位置前后；后添加的優(yōu)先級(jí)要高。

原則一 - 繼承不如指定。
原則二 - #ID > .class > 標(biāo)簽選擇符。
原則三 - 越具體越強(qiáng)大。
原則四 - 標(biāo)簽#id >#id ; 標(biāo)簽.class > .class。
原則五 - 原則一 > 原則二 > 原則三 > 原則四。

關(guān)于如何理解CSS優(yōu)先級(jí)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)名稱：如何理解CSS優(yōu)先級(jí)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://www.chinadenli.net/article2/degdic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、域名注冊(cè)、網(wǎng)站維護(hù)、做網(wǎng)站、響應(yīng)式網(wǎng)站、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何理解CSS優(yōu)先級(jí)-創(chuàng)新互聯(lián)