建站
咨詢
售后
建站咨詢
新聞中心
當創(chuàng)建的樣式表越來越復雜時，一個標簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級。
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序設計、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了蘭考免費建站歡迎大家使用！
CSS 的繼承性
CSS 的繼承特性指的是應用在一個標簽上的那些 CSS 屬性被傳到其子標簽上?？聪旅娴?HTML 結(jié)構(gòu)：
如果
有個屬性 color: red，則這個屬性將被
繼承，即
也擁有屬性 color: red。
由上可見，當網(wǎng)頁比較復雜， HTML 結(jié)構(gòu)嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規(guī)則是：
CSS 優(yōu)先規(guī)則1： 最近的祖先樣式比其他祖先樣式優(yōu)先級高。
例1：
"color: red">
"color: blue">
如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做”祖先樣式”，那么”直接樣式”就是一個標簽直接擁有的屬性。又有如下規(guī)則：
CSS 優(yōu)先規(guī)則2：”直接樣式”比”祖先樣式”優(yōu)先級高。
例2：
"color: red">
"color: blue">
選擇器的優(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)先級關(guān)系：內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器
例3：
// HTML
"content-id" style=
"color: black">
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
最終的 color 為 black，因為內(nèi)聯(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：
// HTML
"con-id">
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
由規(guī)則 4 可見， 的 color 為 red。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應用的位置越在下面則優(yōu)先級越高，其實這仍然可以用規(guī)則 4 來解釋。
例5：
// HTML
"stylesheet" type="text/css" href="style-link.css">
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以
的背景色為 blue。
上面代碼中，@import 語句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無效。當然不推薦使用 @import 的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。
CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術(shù)。
CSS 優(yōu)先規(guī)則5：屬性后插有 !important 的屬性擁有最高優(yōu)先級。若同時插有 !important，則再利用規(guī)則 3、4 判斷優(yōu)先級。
例6：
// HTML
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以
的 background 為 red。
錯誤的說法
在學習過程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標簽選擇器權(quán)值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權(quán)值相加，然后再比較權(quán)值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 > 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：權(quán)重的進制是并不是十進制，CSS 權(quán)重進制在 IE6 為 256，后來擴大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權(quán)值為 110，但因為 11 個均為類選擇器，所以其實總權(quán)值最多不能超過 100， 你可以理解為 99.99，所以最終應用后者樣式。
網(wǎng)頁題目：CSS樣式優(yōu)先級是什么
標題鏈接：http://m.5511xx.com/article/dppsohi.html
