日照網絡公司
掃描關注網站建設微信公眾賬號

掃一掃微信二維碼

日照網站建設公司教你CSS使用層疊順序

昊諾網絡o2017-08-18 09:03:34o網絡知識o

日照網站建設公司教你CSS使用層疊順序


CSS支持給同一個元素多次設置相同的規則,這就是所謂競爭規則(Competing Rule)。瀏覽器使用層疊順序來確定一組競爭規則中真正生效的規則。例如,瀏覽器會給每一個元素設置默認規則。當給一個元素設置規則時,這個規則會與默認規則競爭,但是由于它具有較高的層疊優先級,所以它會覆蓋默認規則。

層疊順序會根據規則使用的選擇器類型將規則劃分為6組。高優先級分組的規則將覆蓋低優先級分組的競爭規則。這些分組按照各個選擇器的特殊性進行劃分。優先級越低,那么這一分組的選擇器的特殊性越低。

層疊順序的基本原則是用一般(general)選擇器設置文檔總體樣式,用特殊(specific)選擇器覆蓋一般選擇器,從而設置特殊樣式。

例如,使用*{margin-bottom:0;}可以將文檔所有元素的底部外邊距設置為0;使用p{margin- bottom: 10px;}可以將文檔所有段落的底部外邊距設置為10像素;使用*.double-space {margin-bottom:2em;},可以將設置double-space類的少數段落的底部外邊距設置為2em;而使用#paragraph3 {margin- bottom:40px;},則可以將一個段落的底部外邊距設置為40像素。

下面是優先級由高到低排列的6種選擇器分組。

(1) 添加了!important規則的分組享有很高優先級。它們會覆蓋所有不帶!important的規則。例如,#i100{border:6px solid black!important;}的優先級高于#i100{border:6px solid black;}。

(2) 第2優先級分組是style屬性所嵌入的規則。由于使用style屬性的代碼難以維護,所以不推薦使用這種方法。

(3) 第三優先級分組是具有一個或多個ID選擇器的規則。例如,#i100{border:6px solid black;}的優先級高于*.c10{border:4px solid black;}。

(4) 第四優先級分組是具有一個或多個類、屬性或偽選擇器的規則。例如,*.c10{border:4px solid black;}優先級高于div{border:2px solid black;}。

(5) 第五優先級分組是具有一個或多個元素選擇器的規則。例如,div{border:2px solid black;}優先級高于*{border:0px solid black;}。

(6) 最低優先級分組是指那些只包含通配選擇器的規則,例如*{border:0px solid black;}。

如果競爭規則屬于同一個選擇器分組(假設兩個規則都包含ID選擇器),那么它們的優先級會進一步根據選擇器的類型和數量進行比較。如果一個選擇器比競爭選擇器具有更多高優先級選擇器,那么這個選擇器的優先級就更高。例如,#i100 *.c20 *.c10{}的優先級高于#i100 *.c10 div p span em{}。因為二者都含有ID選擇器,所以它們都屬于第三優先級分組。因為第一條規則包含兩個類選擇器,而第二條規則只有一個類選擇器,所以第一條規則的優先級更高——即使第二條規則具有為數更多的選擇器。

如果競爭規則屬于相同的選擇器分組,并且具有相同數量和級別的選擇器,那么它們會進一步按照位置進行優先級比較。所有屬于高優先級位置的規則會覆蓋低優先級位置的規則。(同樣,這個方法有效的前提是競爭規則位于同一個選擇器分組,并且具有相同數量和級別的選擇器。選擇器分組總是優先于位置分組。)

下面是優先級由高到低排列的6個位置。

(1) 最高優先級的位置是HTML文檔頭部的<style>元素。例如,<style>元素的規則會覆蓋<style>元素中@import語句所導入的樣式表中所包含的競爭規則。

(2) 第二優先級的位置是<style>元素中@import語句所導入的樣式表。例如,<style>元素中@import語句導入的樣式表規則會覆蓋<link>元素附加的樣式表規則。

(3) 第三優先級的位置是<link>元素附加的樣式表。例如,<link>元素附加的樣式表規則會覆蓋樣式表中@import語句所導入的競爭規則。

(4) 第四優先級的位置是<link>元素附加的樣式表中@import語句所導入的樣式表。例如,鏈接樣式表中@import語句導入的規則會覆蓋最終用戶附加的樣式表的競爭規則。

(5) 第五優先級的位置是最終用戶附加的樣式表。

有一種例外情況是最終用戶樣式表中的!important規則。這些規則具有最高優先級。這樣,最終用戶就能夠創建一些規則,覆蓋初始樣式表中的競爭規則。
(6) 低優先級的位置是瀏覽器提供的默認樣式表。

如果在同一個位置級別上附加或導入了多個樣式表,那么它們的優先級由附加的順序決定。后面附加的樣式表將覆蓋前面附加的樣式表。

如果競爭規則屬于同一個選擇器分組,具有相同數量和等級的選擇器,并且具有相同的位置級別,那么代碼中位置較后的規則會覆蓋前面的規則。

在例1-7中,樣式表中每一條規則都會應用于div元素上。每一條規則都給<div>設置不同的border-width。層疊順序決定了實際應用的規則。我把樣式表中的樣式按照重要性從低到高的層疊順序進行排列。從截圖中可以看到,瀏覽器將后面一條規則應用到<div>上,將<div>的邊框寬度設置為14像素。瀏覽器之所以選擇這條規則,是因為它具有高優先級的層疊順序,它附加了!important的ID選擇器。

注意,ID選擇器覆蓋類選擇器,類選擇器覆蓋元素選擇器,元素選擇器又覆蓋通配選擇器。而且,!important會使選擇器獲得更高一級的重要性。例如,添加!important的通配選擇器優先級高于未添加!important的ID選擇器。

注意,body和html選擇器的border-style:none!important;會覆蓋通配選擇器*,從而去掉<body>和<html>的邊框。這也說明了元素選擇器會覆蓋通配選擇器。

QQ截圖20170818091234.jpg

以上是日照網站建設公司(昊諾網絡公司)分享,如果大家喜歡該分享想了解更多,請關注我們的網站動態!

 

文章關鍵詞
国产亚洲精品第一综合另类