CSS層疊排序

2021-05-27 19:14:15 字數 1215 閱讀 2057

在層疊排序背後的指導性原則是:普通(general)選擇符會設定文件的總體樣式,更具體的(more specific)選擇符則會覆蓋掉普通的選擇符,以為器提供更加特殊的樣式。

下面按從高倒低的順序列出6個選擇符群組:

1、使用important規則群組擁有最高優先順序。它們會覆蓋掉所有非!important規則。例如,#i100的優先順序要高於#i100

2、優先順序第二高的群組是嵌在style屬性裡的規則。因為使用style屬性會增加**維護的難度,所以不建議使用它。

3、優先順序第三高的群組是值那些擁有乙個或多個id選擇符的規則

4、優先順序第四高的群組是指含有乙個或多個類、屬性或為類選擇符的規則。

5、優先順序第五高的群組是含有乙個或多個元素選擇符的規則。

6、優先順序最低的群組是只有通配選擇符的規則--例如,*{}

當競爭規則位於同一選擇符群組並且擁有同樣等級和數量的選擇符是,它們的優先順序會按所處的位置來排。再次強調,只有當競爭規則位於同一選擇符群組並且擁有同樣等級和數量的選擇符時,才應用這條規則。

1、最高優先順序位置為html文件頭部中的元素。比如,裡的規則會覆蓋掉通過嵌在裡的@import語句引入的樣式表裡的競爭規則。

2、第二高優先順序的位置

為通過嵌在元素裡的@import語句引入的樣式表。

3、第三高優先順序的位置為元素鏈結的樣式表。

4、第四高優先順序的位置為有鏈結的樣式表中通過@import語句引入的樣式表。

5、第五高優先順序的位置為終端使用者繫結的樣式表。

當在終端使用者的樣式表中使用!important規則會有乙個例外,此時這些規則會擁有最高優先順序。這便允許了終端使用者建立的規則能夠覆蓋開發者樣式表中的規則。

6、最低優先順序的位置為瀏覽器所提供的預設樣式表。

擋在相同的位置等級輸入或繫結多個樣式表的時候,他們呢的繫結順序就決定了它們的優先順序。

當競爭規則處於同一選擇符群組,並且選擇符的數量、等級和位置也相同的時候,那麼**中後面的規則將覆蓋寫在前面的規則。

簡化層疊:

讓規則按照層疊的順序來組織將非常容易知道具體應用了哪條競爭規則:

/*通配選擇符*/

/*元素選擇符*/

/*類、屬性和偽類選擇符*/

/*id選擇符*/

/*!important通配選擇符*/

/*!important元素選擇符*/

/*!important類、屬性和偽類選擇符*/

/*!important id選擇符*/

css層疊樣式

css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...

css層疊樣式

層疊樣式表 層疊 相同的樣式的不同值作用到同一元素的時候,會有樣式被覆蓋.樣式生效會有先後重要的順序.根據樣式優先順序,如果優先順序一樣,後寫會覆蓋先寫的.樣式表 元素視覺表現的集合.例如我們看到的寬高背景顏色等等 樣式是依附html而存在的,如果沒有標籤,樣式將毫無意義.最小影響法則 當我們建立乙...

CSS總結 層疊

css全稱叫層疊樣式表,那麼為什麼css叫做層疊樣式表呢?首先我們需要了解下什麼衝突規則 衝突規則 在某些時候,在做乙個專案過程中你會發現一些應該產生效果的樣式沒有生效。通常的原因是你建立了兩個規則同時對相同的元素生效。我們需要在衝突發生時決定應該使用那一條規則。層疊 stylesheets cas...