css的優(yōu)先級(jí)順序是怎樣的

當(dāng)創(chuàng)建的樣式表越來(lái)越復(fù)雜時(shí)，一個(gè)標(biāo)簽的樣式將會(huì)受到越來(lái)越多的影響，這種影響可能來(lái)自周?chē)臉?biāo)簽，也可能來(lái)自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級(jí)。

為乳源等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及乳源網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、乳源網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

CSS 的繼承性

CSS 的繼承特性指的是應(yīng)用在一個(gè)標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上?？聪旅娴?HTML 結(jié)構(gòu)：

div

p/p/div

如果?div?有個(gè)屬性?color: red，則這個(gè)屬性將被?p?繼承，即?p?也擁有屬性?color: red。

由上可見(jiàn)，當(dāng)網(wǎng)頁(yè)比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時(shí)，一個(gè)標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：

CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高。

例1：

!-- 類(lèi)名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個(gè)標(biāo)簽從祖先那里繼承來(lái)的而自身沒(méi)有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個(gè)標(biāo)簽直接擁有的屬性。又有如下規(guī)則：

CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級(jí)高。

例2：

!-- 類(lèi)名為 son 的 div 的 color 為 blue --div style="color: red"

div class="son" style="color: blue"/div/div

選擇器的優(yōu)先級(jí)

上面討論了一個(gè)標(biāo)簽從祖先繼承來(lái)的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級(jí)之前，先說(shuō)說(shuō) CSS 7 種基礎(chǔ)的選擇器：

ID 選擇器， 如 #id{}

類(lèi)選擇器， 如 .class{}

屬性選擇器， 如 a[href="segmentfault.com"]{}

偽類(lèi)選擇器， 如 :hover{}

偽元素選擇器， 如 ::before{}

標(biāo)簽選擇器， 如 span{}

通配選擇器， 如 *{}

CSS 優(yōu)先規(guī)則3：優(yōu)先級(jí)關(guān)系：內(nèi)聯(lián)樣式 ID 選擇器 類(lèi)選擇器 = 屬性選擇器 = 偽類(lèi)選擇器 標(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)先級(jí)高。

所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}

子選擇符： .father .child{}

相鄰選擇符: .bro1 + .bro2{}

當(dāng)一個(gè)標(biāo)簽同時(shí)被多個(gè)選擇符選中，我們便需要確定這些選擇符的優(yōu)先級(jí)。我們有如下規(guī)則：

CSS 優(yōu)先規(guī)則4：計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)（a），計(jì)算選擇符中類(lèi)選擇器、屬性選擇器以及偽類(lèi)選擇器的個(gè)數(shù)之和（b），計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級(jí)高，相等則比較下一個(gè)。若最后兩個(gè)的選擇符中 a、b、c 都相等，則按照"就近原則"來(lái)判斷。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由規(guī)則 4 可見(jiàn)，span 的 color 為 red。

如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會(huì)出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級(jí)越高，其實(shí)這仍然可以用規(guī)則 4 來(lái)解釋。

例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?語(yǔ)句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無(wú)效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見(jiàn)另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個(gè)特定的屬性要顯示時(shí)，可以使用這個(gè)技術(shù)。

CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級(jí)。若同時(shí)插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級(jí)。

例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。

錯(cuò)誤的說(shuō)法

在學(xué)習(xí)過(guò)程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說(shuō)法，即 ID 選擇器權(quán)值為 100，類(lèi)選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類(lèi)選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說(shuō)法其實(shí)是有問(wèn)題的。比如一個(gè)由 11 個(gè)類(lèi)選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說(shuō) 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來(lái)擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說(shuō)明。11 個(gè)類(lèi)選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類(lèi)選擇器，所以其實(shí)總權(quán)值最多不能超過(guò) 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。

css的三種樣式中哪種樣式的優(yōu)先級(jí)最高

css樣式采取的就近樣式原則。

行內(nèi)樣式div style=""/div優(yōu)先級(jí)最高，沒(méi)有行內(nèi)樣式那么會(huì)回在頁(yè)答面找style/style內(nèi)嵌樣式。

名稱(chēng)CSS中的“層疊（cascading）”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說(shuō)，CSS樣式單中的樣式形成一個(gè)層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由CSS根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果。

擴(kuò)展資料：

易于使用和修改：

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的CSS文件中，以供HTML頁(yè)面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。

另外，可以將相同樣式的元素進(jìn)行歸類(lèi)，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中。

參考資料來(lái)源：百度百科-CSS

Css中樣式的優(yōu)先級(jí)

當(dāng)在一個(gè)樣式聲明中使用一個(gè) !important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。雖然，從技術(shù)上講， !important 與優(yōu)先級(jí)無(wú)關(guān)，但它與最終的結(jié)果直接相關(guān)。使用 !important 是一個(gè) 壞習(xí)慣 ，應(yīng)該盡量避免，因?yàn)檫@破壞了樣式表中的固有的級(jí)聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。當(dāng)兩條相互沖突的帶有 !important 規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。

一些經(jīng)驗(yàn)法則：

什么的情況下可以使用 !important：

A) 覆蓋內(nèi)聯(lián)樣式

你的網(wǎng)站上有一個(gè)設(shè)定了全站樣式的 CSS 文件，同時(shí)你（或是你同事）寫(xiě)了一些很差的內(nèi)聯(lián)樣式。

全局的CSS文件會(huì)在全局范圍內(nèi)設(shè)置網(wǎng)站的外觀，而直接在各個(gè)元素上定義的內(nèi)聯(lián)樣式可能會(huì)覆蓋您的全局CSS文件。 內(nèi)聯(lián)樣式和!important都被認(rèn)為是非常不好的做法，但是有時(shí)你可以在CSS文件里用!important去覆蓋內(nèi)聯(lián)樣式。

在這種情況下，你就可以在你全局的 CSS 文件中寫(xiě)一些 !important 的樣式來(lái)覆蓋掉那些直接寫(xiě)在元素上的行內(nèi)樣式。

css的優(yōu)先級(jí)是什么,權(quán)重如何計(jì)算

（1） 優(yōu)先級(jí)就近原則，同權(quán)重以最近者為準(zhǔn) 載入樣式以最后載入的樣式為準(zhǔn)；

同權(quán)重下：內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） 嵌入樣式表（當(dāng)前文件） 外部樣式表（外部文件）

！import id class tag

Import比內(nèi)聯(lián)樣式優(yōu)先級(jí)高

層疊重要度次序：

帶有important的用戶(hù)樣式

帶有important的作者樣式

作者樣式

用戶(hù)樣式

瀏覽器/用戶(hù)代理應(yīng)用的樣式

（2） 權(quán)重分為a b c d ，4個(gè)等級(jí)，每個(gè)等級(jí)以10為基數(shù)分別是

內(nèi)聯(lián)樣式（或行內(nèi)樣式）a=1

b = ID選擇器個(gè)數(shù)

c = 類(lèi)、偽類(lèi)和屬性選擇器的個(gè)數(shù)

d = 元素選擇器和偽元素選擇器的個(gè)數(shù)

css優(yōu)先級(jí)高低排列

選擇器優(yōu)先級(jí)：

通常我們可以將CSS的優(yōu)先級(jí)由高到低分為六組：

1、無(wú)條件優(yōu)先的屬性只需要在屬性后面使用 !important 。它會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。IE 6不支持這個(gè)屬性；

2、第二高位的優(yōu)先屬性是在html中給元素標(biāo)簽加style。由于該方法會(huì)造成CSS的難以管理，所以不推薦使用。

3、第三級(jí)優(yōu)先的屬性是由一個(gè)或多個(gè)id選擇器來(lái)定義的。例如 #id{margin:0;} 會(huì)覆蓋 .classname{margin:3px;}。

4、第四級(jí)的屬性由一個(gè)或多個(gè) 類(lèi)選擇器、屬性選擇器、偽類(lèi)選擇器定義。如 .classname{margin:3px;} 會(huì)覆蓋 div{margin:6px;}

5、第五級(jí)由一個(gè)或多個(gè) 類(lèi)型選擇器定義。如 div{margin:6px;} 覆蓋 *{margin:10px;} 。

最低一級(jí)的選擇器是為一個(gè)通配選擇器，用*{margin:10px;}這樣的類(lèi)型來(lái)定義。

另外，可以用一句極為簡(jiǎn)單的話(huà)來(lái)描述CSS優(yōu)先級(jí)問(wèn)題：當(dāng)一個(gè)CSS選擇器擁有更多的高級(jí)別屬性時(shí)，它的優(yōu)先級(jí)就會(huì)比較高。如 #i100

*.c20 *.c10{} 的優(yōu)先級(jí)就會(huì)高于 #i100 *.c10 div p span em{}

，這是由于前者擁有一個(gè)第三級(jí)和兩個(gè)第四級(jí)的選擇器而后者第三級(jí)和第四級(jí)的選擇器各為一個(gè)，當(dāng)然前者優(yōu)先級(jí)會(huì)比較高。相同級(jí)別的優(yōu)先級(jí)：

當(dāng)比較多個(gè)相同級(jí)別的CSS選擇器優(yōu)先級(jí)時(shí)，它們定義的位置將決定一切。下面從位置上將CSS優(yōu)先級(jí)由高到低分為六級(jí)：

1、位于head/標(biāo)簽里的style/中所定義的CSS擁有最高級(jí)的優(yōu)先權(quán)。

2、第二級(jí)的優(yōu)先屬性由位于 style/標(biāo)簽中的 @import 引入樣式表所定義。

3、第三級(jí)的優(yōu)先屬性由link/標(biāo)簽所引入的樣式表定義。

4、第四級(jí)的優(yōu)先屬性由link/標(biāo)簽所引入的樣式表內(nèi)的 @import 導(dǎo)入樣式表定義。

5、第五級(jí)優(yōu)先的樣式由用戶(hù)設(shè)定。

最低級(jí)的優(yōu)先權(quán)由瀏覽器默認(rèn)。

分享標(biāo)題：css樣式表的優(yōu)先級(jí),CSS樣式表的優(yōu)先級(jí)怎么規(guī)定的
文章位置：http://m.rwnh.cn/article2/dscdcic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作

廣告

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