css的優先級順序是怎樣的

當創建的樣式表越來越復雜時，一個標簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優先級。

為乳源等地區用戶提供了全套網頁設計制作服務，及乳源網站建設行業解決方案。主營業務為成都網站建設、成都網站制作、乳源網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

CSS 的繼承性

CSS 的繼承特性指的是應用在一個標簽上的那些 CSS 屬性被傳到其子標簽上。看下面的 HTML 結構：

div

p/p/div

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

由上可見，當網頁比較復雜， HTML 結構嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規則是：

CSS 優先規則1：?最近的祖先樣式比其他祖先樣式優先級高。

例1：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標簽直接擁有的屬性。又有如下規則：

CSS 優先規則2："直接樣式"比"祖先樣式"優先級高。

例2：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

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

選擇器的優先級

上面討論了一個標簽從祖先繼承來的屬性，現在討論標簽自有的屬性。在討論 CSS 優先級之前，先說說 CSS 7 種基礎的選擇器：

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

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

偽類選擇器， 如 :hover{}

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

標簽選擇器， 如 span{}

通配選擇器， 如 *{}

CSS 優先規則3：優先級關系：內聯樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標簽選擇器 = 偽元素選擇器

例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，因為內聯樣式比其他選擇器的優先級高。

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

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

子選擇符： .father .child{}

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

當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：

CSS 優先規則4：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 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;}

由規則 4 可見，span 的 color 為 red。

如果外部樣式表和內部樣式表中的樣式發生沖突會出現什么情況呢？這與樣式表在 HTML 文件中所處的位置有關。樣式被應用的位置越在下面則優先級越高，其實這仍然可以用規則 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;}

從順序上看，內部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。

上面代碼中，@import?語句必須出現在內部樣式之前，否則文件引入無效。當然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規則的方法，當你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術。

CSS 優先規則5：屬性后插有?!important?的屬性擁有最高優先級。若同時插有?!important，則再利用規則 3、4 判斷優先級。

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

雖然 .father .son 擁有更高的權值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。

錯誤的說法

在學習過程中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然后再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：權重的進制是并不是十進制，CSS 權重進制在 IE6 為 256，后來擴大到了 65536，現代瀏覽器則采用更大的數量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100， 你可以理解為 99.99，所以最終應用后者樣式。

css的三種樣式中哪種樣式的優先級最高

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

行內樣式div style=""/div優先級最高，沒有行內樣式那么會回在頁答面找style/style內嵌樣式。

名稱CSS中的“層疊（cascading）”表示樣式單規則應用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先級由CSS根據這個層次結構決定，從而實現級聯效果。

擴展資料：

易于使用和修改：

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。

另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標簽中。

參考資料來源：百度百科-CSS

Css中樣式的優先級

當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。雖然，從技術上講， !important 與優先級無關，但它與最終的結果直接相關。使用 !important 是一個 壞習慣 ，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則 使得調試找bug變得更加困難了。當兩條相互沖突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。

一些經驗法則：

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

A) 覆蓋內聯樣式

你的網站上有一個設定了全站樣式的 CSS 文件，同時你（或是你同事）寫了一些很差的內聯樣式。

全局的CSS文件會在全局范圍內設置網站的外觀，而直接在各個元素上定義的內聯樣式可能會覆蓋您的全局CSS文件。 內聯樣式和!important都被認為是非常不好的做法，但是有時你可以在CSS文件里用!important去覆蓋內聯樣式。

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

css的優先級是什么,權重如何計算

（1） 優先級就近原則，同權重以最近者為準 載入樣式以最后載入的樣式為準；

同權重下：內聯樣式表（標簽內部） 嵌入樣式表（當前文件） 外部樣式表（外部文件）

！import id class tag

Import比內聯樣式優先級高

層疊重要度次序：

帶有important的用戶樣式

帶有important的作者樣式

作者樣式

用戶樣式

瀏覽器/用戶代理應用的樣式

（2） 權重分為a b c d ，4個等級，每個等級以10為基數分別是

內聯樣式（或行內樣式）a=1

b = ID選擇器個數

c = 類、偽類和屬性選擇器的個數

d = 元素選擇器和偽元素選擇器的個數

css優先級高低排列

選擇器優先級：

通常我們可以將CSS的優先級由高到低分為六組：

1、無條件優先的屬性只需要在屬性后面使用 !important 。它會覆蓋頁面內任何位置定義的元素樣式。IE 6不支持這個屬性；

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

3、第三級優先的屬性是由一個或多個id選擇器來定義的。例如 #id{margin:0;} 會覆蓋 .classname{margin:3px;}。

4、第四級的屬性由一個或多個 類選擇器、屬性選擇器、偽類選擇器定義。如 .classname{margin:3px;} 會覆蓋 div{margin:6px;}

5、第五級由一個或多個 類型選擇器定義。如 div{margin:6px;} 覆蓋 *{margin:10px;} 。

最低一級的選擇器是為一個通配選擇器，用*{margin:10px;}這樣的類型來定義。

另外，可以用一句極為簡單的話來描述CSS優先級問題：當一個CSS選擇器擁有更多的高級別屬性時，它的優先級就會比較高。如 #i100

*.c20 *.c10{} 的優先級就會高于 #i100 *.c10 div p span em{}

，這是由于前者擁有一個第三級和兩個第四級的選擇器而后者第三級和第四級的選擇器各為一個，當然前者優先級會比較高。相同級別的優先級：

當比較多個相同級別的CSS選擇器優先級時，它們定義的位置將決定一切。下面從位置上將CSS優先級由高到低分為六級：

1、位于head/標簽里的style/中所定義的CSS擁有最高級的優先權。

2、第二級的優先屬性由位于 style/標簽中的 @import 引入樣式表所定義。

3、第三級的優先屬性由link/標簽所引入的樣式表定義。

4、第四級的優先屬性由link/標簽所引入的樣式表內的 @import 導入樣式表定義。

5、第五級優先的樣式由用戶設定。

最低級的優先權由瀏覽器默認。

分享標題：css樣式表的優先級,CSS樣式表的優先級怎么規定的
文章位置：http://m.2m8n56k.cn/article2/dscdcic.html

成都網站建設公司_創新互聯，為您提供域名注冊、外貿網站建設、App開發、網站設計公司、網頁設計公司、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯