日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入理解css优先级

發布時間：2023/12/10 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 深入理解css优先级 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

為什么要寫這篇文章是因為

<style type="text/css"> body h1 {color: green; } html h1 {color: purple; } </style><body><h1>Here is a title!</h1> </body>

上面代碼執行結果是這樣的。按照我的理解，body在DOM中比html近，應該會按body h1中定義的綠色來顯示文字，但是恰恰相反，文字顏色是紫色的。

原因現在我當然是知道的，因為css中優先級無視DOM樹中節點的距離遠近，就是說DOM樹中的距離不會對元素優先級計算產生影響。如果優先級相同，靠后的 CSS 會應用到元素上。而html h1靠后，當然是紫色了，如果調換html h1和body h1順序那就是綠色了。

以上我剛開始犯的錯誤，其實是被繼承樣式給唬住了，但是繼承的樣式是低于設定的樣式的。如果只是繼承，那離的近的當然優先級高，比如舉個例子：

<style type="text/css"> #close{color: green; } #further{color: purple; } </style><body> <div id="further"> <div id="close"><h1>Here is a title!</h1> </div> </div> </body>

不管#close和#further順序，文字都是綠色的。

接下來就系統的看看css優先級。

一、優先級

瀏覽器根據優先級來決定給元素應用哪個樣式，而優先級僅由選擇器的匹配規則來決定。

內聯》ID選擇器》偽類=屬性選擇器=類選擇器》元素選擇器【p】》通用選擇器(*)》繼承的樣式

二、優先級計算：

上面說了，優先級僅有選擇器決定，怎么個計算方法呢？

a、用a表示選擇器中ID選擇器出現的次數

b、用b表示類選擇器，屬性選擇器和偽類選擇器出現的總次數。

c、用c表示標簽選擇器、偽元素選擇器出現的總次數

d、忽略通用選擇器

e、然后計算a*100+b*10+c的大小，這就是優先級了。

權重：內聯樣式1000》id選擇器100》class選擇器10》標簽選擇器1

Note:

ID選擇器「如：#header」，Class選擇器「如：.foo」，屬性選擇器「如：[class]」，偽類「如：:link」，標簽選擇器「如：h1」，偽元素「如：:after」，選擇器「*」

接下來從以下幾點深入分析優先級。

1、優先級計算無視DOM樹中的距離

開頭說明的例子：

<!DOCTYPE html> <html> <style type="text/css"> body h1 {color: green; } html h1 {color: purple; } </style> </head> <body> <h1>Here is a title!</h1> </html> View Code

body h1和html h1的優先級相同。

2、偽類選擇器，屬性選擇器和class選擇器的優先級一樣【update20170422】

偽類=屬性選擇器=類選擇器

所以后面的會覆蓋前面的。

<!DOCTYPE html> <html> <meta charset="utf-8"> <style type="text/css">:focus {color: red;}[class] {color: blue;}.classtest {color: green;} </style> </head> <body> <div class="classtest">什么顏色文字 </div> </body> </html> View Code

如下圖類選擇器在后，所以覆蓋前面的樣式，所以文字綠色。

如下圖屬性選擇器在后，會覆蓋前面的類選擇器樣式，所以文本藍色。

focus同理，只有放后面才生效，否則會被偽類和屬性選擇器覆蓋

3、基于類型的優先級

優先級是根據選擇器的類型進行計算的。

舉例：屬性選擇器盡管選擇了一個ID但是在優先級計算中還是根據類型計算，因此即使選擇的是相同的元素，但ID選擇器有更高的優先級，所以* #foo設置的樣式生效。

<!DOCTYPE html> <html> <style type="text/css"> * #foo {color: green; } *[id="foo"] {color: purple; } </style> </head> <body> <p id="foo">I am a sample text.</p> </body> </html> View Code

4、：not偽類不參與優先級計

【：not】否定偽類在優先級計算中不會被看做是偽類，但是，會把:not里面的選擇器當普通選擇器計數。這句話有點不好理解，其實就是忽略掉:not，其他偽類(如:hover)參與CSS優先級的計算，但是「:not」不參與計算。

舉個例子：

<!DOCTYPE html> <html> <style type="text/css"> div.outer p {color:red; } div:not(.outer) p {color: blue; } </style> </head> <body> <div class="outer"><p>This is in the outer div.</p><div class="inner"><p>This text is in the inner div.</p></div> </div> </body> </html> View Code

該例子中，選擇器div.outer p 和選擇器div:not(.outer) p的優先級是相同的，:not被忽略掉了，:not(.outer)中的.outer正常計數。

如果調換位置，inner元素會變成紅色

div:not(.outer) p {color: blue;}div.outer p {color:red;}

5、優先級計算不升位

不要把權重簡單的作為10進制數字比較其大小。

a=1的規則優先級將永遠高于其他a=0的。

比如一個選擇器的a>0，b=0即使另外一個選擇器的a=0，b=12，c=12那么前者的權重依然更大！！

為證明我做了一個不現實的demo

<!DOCTYPE html> <html> <meta charset="utf-8"> <style type="text/css">#test{ /*a=1*/color: blue } div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest{ /*b=12*/ color:green; }</style> </head> <body> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div class="classtest"> <div id="test" class="classtest"> 什么顏色文章 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> View Code

可見文本顏色還是藍色！！

同樣有一個帶有10個id選擇器的規則，優先級也不如內聯樣式。

總之優先級的計算不是基于十進制升位的，后面的數優先級再高也不能升到前一位。

6、其他

下面再給出一個經典的例子，自己計算一下就明白了。

Examples:* /* a=0 b=0 c=0 -> specificity = 0 */ LI /* a=0 b=0 c=1 -> specificity = 1 */ UL LI /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

如果確實有棘手的情況，可以在Firebug中查看優先級。Firebug中按照優先級排序顯示規則，將優先級更高的規則顯示在最上面，并將被覆蓋的規則用刪除線劃掉。

三、!import

為什么沒有把!import放在優先級順序中，因為官方認為!import和優先級沒一點關系。

不建議使用!import

  • Never 絕不要在全站使用!import。
  • Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用???!important
  • Never 永遠不要在你的插件中使用?!important
  • Always 要優先考慮使用樣式規則的優先級來解決問題而不是?!important

選擇元素時盡量不要多選，不要放寬選擇器的范圍。因為范圍越小，越具有針對性，優先級越高。

1、什么場合使用!import?

使用!import的場合也是有的，但是是在沒有別的解決方案的時候。

比如需要覆蓋內聯樣式，因為內聯樣式的優先級最高，只能用!import去覆蓋內聯樣式。

還有一種情況

<style type="text/css"> #someElement p {color: blue; }p.awesome {color: red; } </style> </head> <body> <div id="someElement"> <p class="awesome">some text</p> </div> </body>

在外層有?#someElement?的情況下，你怎樣能使?awesome?的段落變成紅色呢？這種情況下，如果不使用?!important?，第一條規則永遠比第二條的優先級更高。這也是沒有別的辦法，如果用內聯結果只會更糟糕。

2、怎樣覆蓋已有!import規則

a、再加一條!import的css語句，將其應用到更高優先級的選擇器（在原有基礎上添加額外的標簽、類或者ID選擇器）。

幾個更高優先級選擇器的例子：

table td {height: 50px !important;} .myTable td {height: 50px !important;} #myTable td {height: 50px !important;}

b、選擇器一樣，但添加的位置在原有聲明后面。因為相同優先級，后邊定義的聲明覆蓋前面的。

相同選擇器的例子：

td {height: 30px !important;} td {height: 50px !important;}

四、資源鏈接

http://www.w3.org/TR/selectors/#specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

轉載于:https://www.cnblogs.com/starof/p/4387525.html

總結

以上是生活随笔為你收集整理的深入理解css优先级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。