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

CSS權重

發表日期:2018-05-23 10:02:08文章編輯:池州網站建設瀏覽次數:8588 標簽:    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給最近新文章有new圖標

<ul> [e:loop={欄目ID,顯示條數,操作類型,只顯示有標題圖片}] <? $newimg="...

日期:2019-10-21

帝國CMS靈動標簽調用專題信息

帝國CMS內置的專題調用標簽總是不理想,調用不方便,還是靈動標簽調用來得方便...

日期:2019-09-14

當前欄目高亮適用于靈動標簽 或js

最近用帝國搭建了好幾個網站,發現有當前欄目要高亮顯示,通過網絡搜索發現好...

日期:2019-08-09

HTML5 meta viewport簡介

隨著移動端的流行,在移動端對網站進行重構和開發勢在必行。但是你只有了解了...

日期:2019-07-22

帝國ECMS做站常用代碼整理

獲取欄目網址:$classurl=sys_ReturnBqClassname($bqr,9);//取得欄目地址 ...

日期:2019-07-22

客戶案例

南京某環境治理公司手機響應式網站(基于bootstarp和帝國CMS)

網站首頁有部分延遲加載的內容,截圖的時候沒有全部截下來。各位可以直接到對...

日期:2019-09-23

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

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

日期:2019-06-18

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

...

日期:2019-05-26

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

...

日期:2019-05-26

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

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

日期:2018-11-06

下载麻将游戏四人麻将 快乐赛车开奖纪录 幸运28的网站大全 十一运夺金重号规律 广西快3人工计划 贵州十一选五前三走 浙江20选5开奖公 中小企业股票融资 南宁站街女 可以赚钱的网游 喜乐彩和值走势图 山水云南麻将 贵州麻将下载 浙江11选5开奖结果 南粤36选7更新开 手机麻将代理哪个平台好 快乐8app下载