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

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

儋州網站建設公司成都創(chuàng)新互聯(lián)公司,儋州網站設計制作，有大型網站制作公司豐富經驗。已為儋州成百上千家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站建設要多少錢，請找那個售后服務好的儋州做網站的公司定做！

CSS 的繼承性

CSS 的繼承特性指的是應用在一個標簽上的那些 CSS 屬性被傳到其子標簽上?？聪旅娴?HTML 結構：

div

p/p/div

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

由上可見，當網頁比較復雜， HTML 結構嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規(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

如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標簽直接擁有的屬性。又有如下規(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)先級

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

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

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

偽類選擇器， 如 :hover{}

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

標簽選擇器， 如 span{}

通配選擇器， 如 *{}

CSS 優(yōu)先規(guī)則3：優(yōu)先級關系：內聯(lián)樣式 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，因為內聯(lián)樣式比其他選擇器的優(yōu)先級高。

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

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

子選擇符： .father .child{}

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

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

CSS 優(yōu)先規(guī)則4：計算選擇符中 ID 選擇器的個數(shù)（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數(shù)之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數(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。

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

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

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

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

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 擁有更高的權值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。

錯誤的說法

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

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

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

一些經驗法則：

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

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

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

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

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

css樣式有哪幾種選擇器？

CSS選擇器、優(yōu)先級與匹配原理\x0d\x0a1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul 通配選擇符的權值 0,0,0,0\x0d\x0a2.標簽的權值為 0,0,0,1\x0d\x0a3.類的權值為 0,0,1,0\x0d\x0a4.屬性選擇的權值為 0,0,1,0\x0d\x0a5.偽類選擇的權值為 0,0,1,0\x0d\x0a6.偽對象選擇的權值為 0,0,0,1\x0d\x0a7.ID的權值為 0,1,0,0\x0d\x0a8.important的權值為最高 1,0,0,0\x0d\x0a使用規(guī)則： 選擇器的權值加到一起，大的優(yōu)先；如果權值相同，后定義的優(yōu)先 。\x0d\x0a從上面我們可以得出兩個關鍵的因素：\x0d\x0a1.權值的大小跟選擇器的類型和數(shù)量有關\x0d\x0a2.樣式的優(yōu)先級跟樣式的定義順序有關

css規(guī)定選擇器優(yōu)先級順序

1. ！important

在屬性后面寫上這條樣式，會覆蓋掉頁面上任何位置定義的元素的樣式。

2. 行內樣式，在style屬性里面寫的樣式。

3. id選擇器

4. class選擇器

5. 標簽選擇器

　 6. 通配符選擇器*

7. 瀏覽器的自定義屬性和繼承

css選擇器依照以上順序排列優(yōu)先級

網站名稱：css樣式順序,css樣式規(guī)則由什么組成
文章URL：http://chinadenli.net/article4/dscsoie.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網站建設、動態(tài)網站、自適應網站、服務器托管、品牌網站建設、域名注冊

廣告

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