建站
咨詢
售后
建站咨詢
新聞中心
Css中樣式的優(yōu)先級
當(dāng)在一個樣式聲明中使用一個 !important 規(guī)則時，此聲明將覆蓋任何其他聲明。雖然，從技術(shù)上講， !important 與優(yōu)先級無關(guān)，但它與最終的結(jié)果直接相關(guān)。使用 !important 是一個 壞習(xí)慣 ，應(yīng)該盡量避免，因?yàn)檫@破壞了樣式表中的固有的級聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。當(dāng)兩條相互沖突的帶有 !important 規(guī)則的聲明被應(yīng)用到相同的元素上時，擁有更大優(yōu)先級的聲明將會被采用。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),東乃企業(yè)網(wǎng)站建設(shè),東乃品牌網(wǎng)站建設(shè),網(wǎng)站定制,東乃網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東乃網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
一些經(jīng)驗(yàn)法則：
什么的情況下可以使用 !important：
A) 覆蓋內(nèi)聯(lián)樣式
你的網(wǎng)站上有一個設(shè)定了全站樣式的 CSS 文件，同時你（或是你同事）寫了一些很差的內(nèi)聯(lián)樣式。
全局的CSS文件會在全局范圍內(nèi)設(shè)置網(wǎng)站的外觀，而直接在各個元素上定義的內(nèi)聯(lián)樣式可能會覆蓋您的全局CSS文件。 內(nèi)聯(lián)樣式和!important都被認(rèn)為是非常不好的做法，但是有時你可以在CSS文件里用!important去覆蓋內(nèi)聯(lián)樣式。
在這種情況下，你就可以在你全局的 CSS 文件中寫一些 !important 的樣式來覆蓋掉那些直接寫在元素上的行內(nèi)樣式。
css的優(yōu)先級順序是怎樣的
當(dāng)創(chuàng)建的樣式表越來越復(fù)雜時，一個標(biāo)簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標(biāo)簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級。
CSS 的繼承性
CSS 的繼承特性指的是應(yīng)用在一個標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上?？聪旅娴?HTML 結(jié)構(gòu)：
div
p/p/div
如果?div?有個屬性?color: red，則這個屬性將被?p?繼承，即?p?也擁有屬性?color: red。
由上可見，當(dāng)網(wǎng)頁比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時，一個標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：
CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級高。
例1：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div style="color: blue"
div class="son"/div
/div/div
如果我們把一個標(biāo)簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標(biāo)簽直接擁有的屬性。又有如下規(guī)則：
CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級高。
例2：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div class="son" style="color: blue"/div/div
選擇器的優(yōu)先級
上面討論了一個標(biāo)簽從祖先繼承來的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級之前，先說說 CSS 7 種基礎(chǔ)的選擇器：
ID 選擇器， 如 #id{}
類選擇器， 如 .class{}
屬性選擇器， 如 a[href="segmentfault.com"]{}
偽類選擇器， 如 :hover{}
偽元素選擇器， 如 ::before{}
標(biāo)簽選擇器， 如 span{}
通配選擇器， 如 *{}
CSS 優(yōu)先規(guī)則3：優(yōu)先級關(guān)系：內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器
例3：
// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {
color: red;}.content-class {
color: blue;}div {
color: grey;}
最終的 color 為 black，因?yàn)閮?nèi)聯(lián)樣式比其他選擇器的優(yōu)先級高。
所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：
后代選擇符： .father .child{}
子選擇符： .father .child{}
相鄰選擇符: .bro1 + .bro2{}
當(dāng)一個標(biāo)簽同時被多個選擇符選中，我們便需要確定這些選擇符的優(yōu)先級。我們有如下規(guī)則：
CSS 優(yōu)先規(guī)則4：計算選擇符中 ID 選擇器的個數(shù)（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數(shù)之和（b），計算選擇符中標(biāo)簽選擇器和偽元素選擇器的個數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。
例4：
// HTMLdiv id="con-id"
span class="con-span"/span/div// CSS#con-id span {
color: red;}div .con-span {
color: blue;}
由規(guī)則 4 可見，span 的 color 為 red。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級越高，其實(shí)這仍然可以用規(guī)則 4 來解釋。
例5：
// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {
background: blue;}/stylediv/div// style-link.cssdiv {
background: lime;}// style-import.cssdiv {
background: grey;}
從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。
上面代碼中，@import?語句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。
CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術(shù)。
CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級。若同時插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級。
例6：
// HTMLdiv class="father"
p class="son"/p/div// CSSp {
background: red !important;}.father .son {
background: blue;}
雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。
錯誤的說法
在學(xué)習(xí)過程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個選擇器由多個 ID 選擇器、類選擇器或標(biāo)簽選擇器組成時，則將所有權(quán)值相加，然后再比較權(quán)值。這種說法其實(shí)是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標(biāo)簽，按理說 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個均為類選擇器，所以其實(shí)總權(quán)值最多不能超過 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。
CSS優(yōu)先級算法如何計算
優(yōu)先級就近原則，同權(quán)情況下樣式定義為最近者為準(zhǔn)
載入樣式以最后載入的定位為準(zhǔn)（后寫的樣式優(yōu)先級高，前提是大家的權(quán)重一樣）
1、!important權(quán)值最高。
2、內(nèi)聯(lián)樣式表的權(quán)值為 1000。
3、ID 選擇器的權(quán)值為 100。
4、Class 類選擇器的權(quán)值為 10。
5、HTML 標(biāo)簽（類型）選擇器的權(quán)值為 1。
CSS中權(quán)重的優(yōu)先級是什么？
CSS權(quán)重是由四個數(shù)值決定，看一張圖比較好解釋：
從CSS代碼存放位置看權(quán)重優(yōu)先級：內(nèi)嵌樣式??內(nèi)部樣式表??外聯(lián)樣式表。其實(shí)這個基本可以忽視之，大部分情況下CSS代碼都是使用外聯(lián)樣式表。
從樣式選擇器看權(quán)重優(yōu)先級：important??內(nèi)嵌樣式??ID??類??標(biāo)簽?|?偽類?|?屬性選擇??偽對象??繼承??通配符。
important的權(quán)重為1,0,0,0
ID的權(quán)重為0,1,0,0
類的權(quán)重為0,0,1,0
標(biāo)簽的權(quán)重為0,0,0,1
偽類的權(quán)重為0,0,1,0
屬性的權(quán)重為0,0,1,0
偽對象的權(quán)重為0,0,0,1
通配符的權(quán)重為0,0,0,0
html
head
style?type="text/css"
#left{color:black!important;}?????????/*1,1,0,0*/
#container?#left{color:red;}?????????/*0,2,0,0*/
#left{color:green!important;}???????/*1,1,0,0*/
.container?#left{color:blue;}??????/*0,1,1,0*/
/style
/head
body
div?class="container"?id="container"
span?id="left"這到底是什么顏色??？/span
/div
/body
/html
CSS 選擇器權(quán)重計算規(guī)則
權(quán)重計算規(guī)則
1.第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
2.第二等：代表ID選擇器，如：#content，權(quán)值為0100。
3.第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。
4.第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。
5.通配符、子選擇器、相鄰選擇器等的。如*、、+,權(quán)值為0000。
6.繼承的樣式?jīng)]有權(quán)值。
例外：!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級還高)。
CSS中的權(quán)重
元素會被多個樣式一層層作用，這就是層疊樣式表的來源。如果多個樣式作用在元素上就會產(chǎn)生優(yōu)先級權(quán)重的問題。
零、屬性后面使用!important，權(quán)重最大，會覆蓋頁面內(nèi)任何位置定義的元素樣式。
一、內(nèi)聯(lián)樣式，權(quán)重為1000【寫在HTML元素的style屬性中】
二、ID選擇器，權(quán)重為0100【非內(nèi)聯(lián)樣式】
三、類、偽類、屬性選擇器，權(quán)重為0010【非內(nèi)聯(lián)樣式】
四、標(biāo)簽、偽元素選擇器，權(quán)重為0001【非內(nèi)聯(lián)樣式】
五、通配符、子選擇器、相鄰選擇器等，權(quán)重為0000【非內(nèi)聯(lián)樣式】
六、繼承的樣式?jīng)]有權(quán)重
注意
沒有權(quán)重 和 權(quán)重為0 ， 權(quán)重為0 的權(quán)重比 沒有權(quán)重 的大，優(yōu)先級高
1、 選擇器中 ID選擇器 的權(quán)重【a = 數(shù)量 * 權(quán)重】
2、 選擇器中 類、偽類、屬性選擇器 的權(quán)重【b = 數(shù)量 * 權(quán)重】
3、 選擇器中 標(biāo)簽、偽元素選擇器 的權(quán)重【c = 數(shù)量 * 權(quán)重】
4、 最終的權(quán)重w = a + b + c
運(yùn)行截圖
width：寬度【塊級元素的會繼承父類的內(nèi)容寬度contentwidth，】
color：字體的顏色
文章標(biāo)題：css樣式權(quán)重優(yōu)先級規(guī)則,css樣式權(quán)重優(yōu)先級規(guī)則圖
文章URL：http://fisionsoft.com.cn/article/dsigpsi.html
