CSS 樣式優先順序

2021-09-19 11:19:11 字數 2386 閱讀 6488

當建立的樣式表越來越複雜時，乙個標籤的樣式將會受到越來越多的影響，這種影響可能來自周圍的標籤，也可能來自其自身。下面我們從這兩方面去看看 css 樣式的優先順序。

css 的繼承特性指的是應用在乙個標籤上的那些 css 屬性被傳到其子標籤上。看下面的 html 結構：
如果有個屬性color: red，則這個屬性將被繼承，即也擁有屬性color: red。

由上可見，當網頁比較複雜， html 結構巢狀較深時，乙個標籤的樣式將深受其祖先標籤樣式的影響。影響的規則是：

css 優先規則1：最近的祖先樣式比其他祖先樣式優先順序高。

例1：
如果我們把乙個標籤從祖先那裡繼承來的而自身沒有的屬性叫做「祖先樣式」，那麼「直接樣式」就是乙個標籤直接擁有的屬性。又有如下規則：

css 優先規則2：「直接樣式」比「祖先樣式」優先順序高。

例2：
上面討論了乙個標籤從祖先繼承來的屬性，現在討論標籤自有的屬性。在討論 css 優先順序之前，先說說 css 7 種基礎的選擇器：

css 優先規則3：優先順序關係：內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器

例3：

// html


// css


#content-id 


.content-class 


div 


最終的 color 為 black，因為內聯樣式比其他選擇器的優先順序高。
所有 css 的選擇符由上述 7 種基礎的選擇器或者組合而成，組合的方式有 3 種：

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

css 優先規則4：計算選擇符中 id 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標籤選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先順序高，相等則比較下乙個。若最後兩個的選擇符中 a、b、c 都相等，則按照「就近原則」來判斷。

例4：

// html


// css


#con-id span 


div .con-span 


由規則 4 可見，的 color 為 red。
如果外部樣式表和內部樣式表中的樣式發生衝突會出現什麼情況呢？這與樣式表在 html 檔案中所處的位置有關。樣式被應用的位置越在下面則優先順序越高，其實這仍然可以用規則 4 來解釋。

例5：

// html


// style-link.css


div 


// style-import.css


div 


從順序上看，內部樣式在最下面，被最晚引用，所以 的背景色為 blue。
上面**中，@import語句必須出現在內部樣式之前，否則檔案引入無效。當然不推薦使用@import的方式引用外部樣式檔案，原因見另一篇部落格：css 引入方式。

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

css 優先規則5：屬性後插有!important的屬性擁有最高優先順序。若同時插有!important，則再利用規則 3、4 判斷優先順序。

例6：

// html


// css


p .father .son 


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


所以 的 background 為 red。
在學習過程中，你可能發現給選擇器加權值的說法，即 id 選擇器權值為 100，類選擇器權值為 10，標籤選擇器權值為 1，當乙個選擇器由多個 id 選擇器、類選擇器或標籤選擇器組成時，則將所有權值相加，然後再比較權值。這種說法其實是有問題的。比如乙個由 11 個類選擇器組成的選擇器和乙個由 1 個 id 選擇器組成的選擇器指向同乙個標籤，按理說 110 > 100，應該應用前者的樣式，然而事實是應用後者的樣式。錯誤的原因是：選擇器的權值不能進製。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100， 你可以理解為 99.99，所以最終應用後者樣式。

css樣式優先順序

多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中，在 html 頁的頭元素中，或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有...

CSS樣式優先順序

css樣式分為內聯樣式和外部樣式，一般情況下 內聯樣式的優先順序大於外部樣式。即style樣式 id選擇器 class選擇器 元素選擇器。例如 on person num li當對li標籤新增上面兩個樣式時，on樣式中重複的內容是不會生效的。因為.on樣式的優先順序值小於li，它會被li樣式覆蓋。但...

css樣式優先順序

css樣式分類 外聯樣式，內部樣式，內聯樣式，行內樣式 標籤屬性 優先順序 行內樣式 標籤屬性 外聯樣式 內部樣式 內聯樣式，這裡的高度為110px class login class imgs 選擇器 權值內聯樣式表的權值最高 1000 id 選擇器的權值 100class 類選擇器的權值 10h...