當前位置:首頁 > 技術教程>

CSS權重

發表日期:2018-05-23 10:02:08文章編輯:池州網站建設瀏覽次數:8579 標簽:    CSS,教程,權重

css權重很多人都聽過,也了解一些,但是很多人對具體的規則或者說再深如一些關于css權重的問題,可能會不那么清楚。日常開發中,或多或少都會遇到css規則不生效的問題,為了讓我們能夠減少調試css規則的時間,深刻理解css權重,就十分關鍵了。如果喜歡的話可以點波贊/關注,支持一下,希望大家看完本文可以有所收獲。

權重規則總結:

!important 優先級最高,但也會被權重高的important所覆蓋

行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)

單獨使用一個選擇器的時候,不能跨等級使css規則生效

如果兩個權重不同的選擇器作用在同一元素上,權重值高的css規則生效

如果兩個相同權重的選擇器作用在同一元素上:以后面出現的選擇器為最后規則.

權重相同時,與元素距離近的選擇器生效

css權重優先級用來干嘛?

在同一個元素使用不同的方式,聲明了相同的一條或多條css規則, 瀏覽器會通過權重來判斷哪一種方式的聲明,與這個元素最為相關,從而在該元素上應用這個聲明方式聲明的所有css規則 。

權重的五個等級及其權重

!important;

行內樣式;

ID選擇器, 權重:100;

class,屬性選擇器和偽類選擇器,權重:10;

屬性選擇器指的是:根據元素的屬性及屬性值來選擇元素,比如button的type屬性等。 偽類選擇器: :active :focus等選項.

標簽選擇器和偽元素選擇器,權重:1;

偽元素選擇器: :before :after

等級關系:

!important>行內樣式>ID選擇器 > 類選擇器 | 屬性選擇器 | 偽類選擇器 > 元素選擇器

權重規則:

1.不推薦使用!important

不推薦使用

!important

,因為

!important

根本沒有結構與上下文可言,并且很多時候權重的問題,就是因為不知道在哪里定義了一個

!important

而導致的。

覆蓋important:

雖然我們應該盡量避免使用!important,但你應該知道如何覆蓋important,加點權重就可以實現,codepen的 demo

//!important 優先級最高,但也會被權重高的important所覆蓋aaa#a{ background: blue !important; /* id的important覆蓋class的important*/} .a{ background: red !important; }

2.行內樣式總會覆蓋外部樣式表的任何樣式,會被

!important

覆蓋

3.單獨使用一個選擇器的時候,不能跨等級使css規則生效

無論多少個class組成的選擇器,都沒有一個ID選擇器權重高。類似的,無論多少個元素組成的選擇器,都沒有一個class選擇器權重高、無論多少個ID組成的選擇器,都沒有行內樣式權重高。

codepen的 demo ;

在demo中使用了11個class組成一個選擇器,最后還是一個ID選擇器,設置的樣式生效。

可以想象在玄幻小說的那種等級制度,沒有突破那個等級,就沒有可比性。

所以權重是在雙方處于同一等級的情況下,才開始對比。

4.如果兩個權重不同的選擇器作用在同一元素上,權重值高的css規則生效

選擇器可能會包含一個或者多個與權重相關的計算點,若經過權重值計算得到的權重值越大,則認為這個選擇器的權重高。舉一個簡單的栗子:

.test #test{ } // id 100+class 10=110;.test #test span{} // id 100+class 10+span 1=111;.test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5.如果兩個相同權重的選擇器作用在同一元素上:以后面出現的選擇器為最后規則.

demo

啦啦啦

#test span{ color:blue; } #app span{ // 生效 因為后面出現 color: red; }

6.權重相同時,與元素距離近的選擇器生效

比如不同的style表,head頭部等,來看下面的栗子:

#content h1 { // css樣式表中 padding: 5px; }

建議:

避免使用

!important

;

利用id增加選擇器權重;

減少選擇器的個數(避免層層嵌套);

結語

以上就是本文關于css權重的內容了,如有不對的地方歡迎指正!希望大家看完可以有所收獲,喜歡的話,趕緊點波

全站導航

其他新聞

靈動標簽判斷奇數偶數實現不同的效果奇偶數

這篇文章主要為大家詳細介紹了帝國CMS靈動標簽中用if判斷第幾條附加特殊樣...

日期:2019-06-18

當前欄目下所有的標題分類并給當前標題分類高亮

<?php //判斷當前欄目是否有設置標題分類 $tr=$empire->fetch1("select tti...

日期:2019-05-26

帝國CMS錯誤報告功能啟用、防垃圾灌水、統計、增加報告分類

一、錯誤報告啟用 內容模板加 <a href="&#091;!--news.url--]e/public/repo...

日期:2018-11-24

幾何元素、大膽鋪色、雙重曝光,這些新技能你掌握了嗎?

不知不覺 2018 年的余額已經只剩下六分之一不知道大家年初定下的計劃有沒有...

日期:2018-11-01

列表頁調取副表字段befrom,writer,newstext

列表模板中要調用副表字段內容需要采用&ldquo;list.var支持程序代碼&rdquo;...

日期:2018-10-30

客戶案例

池州某信息技術服務公司網站

網站使用的是PC+移動端判斷跳轉的。主色調為藍色,突出科技主題,呈現服務宗旨...

日期:2019-06-18

池州某加工生產企業工程公司官方網站

...

日期:2019-05-26

某縣生產力促進中心官方網站

...

日期:2019-05-26

廣東中山某大型機械工程公司官方網站

這是廣東一家大型進出口機械設備制造公司,實力雄厚。網站是響應式的。客戶對...

日期:2018-11-06

帝國網站后臺登錄模板(帶動畫)

閑來無事,看到一個很漂亮的登錄模板,就順手修改成了帝國CMS7.5的后臺登錄模板...

日期:2018-11-02

下载麻将游戏四人麻将