css優先順序

2021-10-25 11:24:09 字數 1465 閱讀 9714

1.css優先順序比較

!important > 內聯樣式 > id > class > 標籤 > 萬用字元 > 繼承 > 預設

2.css權重計算

我們把特殊性分為4個等級,每個等級代表一類選擇器,每個等級的值為其所代表的選擇器的個數乘以這一等級的權值,最後把所有等級的值相加得出選擇器的特殊值。

4個等級的定義如下:

第一等:代表內聯樣式,如: style=」」,權值為1000。

第二等:代表id選擇器,如:#content,權值為0100。

第三等:代表類,偽類和屬性選擇器,如.content,權值為0010。

第四等:代表標籤選擇器和偽元素選擇器,如div p,權值為0001。

第五等:通用選擇器(*),子選擇器(>),相鄰同胞選擇器(+),權值為0000

下面是一些計算示例:

注意我的字型大小和顏色

問題分析 問題1:權重相同的兩個樣式都對映到乙個標籤,哪乙個會被覆蓋呢?

這就是除去權重後的又乙個影響因素了,權重相同就和你的書寫順序有關了,寫在前面的會被後面的覆蓋,如下:

權重相同,後面的樣式會覆蓋掉前面的,所以最後顯示的樣式為color: yellow;font-weight: 100;

2.權重相同,乙個樣式定義在html中乙個定義在css檔案中,哪乙個會被覆蓋呢?

最終顯示樣式會和你的引入順序有關。所以你的引入順序決定了你的樣式,如下:

css裡面的檔案如下:

#div1 .div2

最終的顯示樣式為:color: red; font-weight: 900;

如果因為檔案的順序如下:

那麼最後的樣式為css/new_file.css檔案下所定義的樣式:color: yellow; font-weight: 900;

問題3:同乙個標籤有多個類名來修飾,類名的先後順序對樣式有影響嗎?

結論:類名的先後順序不影響樣式,主要看權重和順序。如果在權重相同的前提下,後面寫的樣式會覆蓋掉前面的樣式,所以上述樣式的最終結果是color:pink;

問題3:權重相同的基礎下,後面寫的樣式覆蓋前面的對應的全部樣式還是全部替換為後面寫的樣式?

結果:權重相同的基礎下,後面寫的樣式覆蓋前面的對應的全部樣式,如上,最終樣式為:

color: blue;width: 100px; height: 100;border:1px solid #cccccc;

問題4:跳級引用,跳過標籤的縮少對樣式有影響嗎?

結論:跳級不影響,主要看權重和先後順序。

最後的顯示j結果為color: pink;

font-size: 20px;

background-color: orange;

問題五:內聯樣式的權重為1000,10個id選擇器的權重也為1000,結果為什麼?

湘潭大學

結論:雖然最後權重達到了1201,但是顯示結果依然為內聯樣式的樣式,即style="color: pink;font-size: 20px;"

css 優先順序

當我們的css樣式中,如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出,也就是常講的css優先順序。一般情況下,你不必擔心css樣式衝突,但對於大型而且複雜的css樣式檔案,或有很多css檔案組成的,就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...

css優先順序

今天在使用公司內部框架的時候,發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器,可是卻不起作用。使用f12檢視,發現是當前的樣式沒有起作用,而是被框架生成的樣式代替掉了。當然,寫內嵌的樣式肯定是沒問題。可問題就是,我明明在頁面內部寫了樣式,按照常理,應該是我手寫的類選擇器的優先順序...

css優先順序

css樣式分為 外部樣式,內部樣式,內聯樣式 選擇器優先權 1.內聯樣式表的權值最高 1000 2.id 選擇器的權值為 100 3.class 類選擇器的權值為 10 4.html 標籤選擇器的權值為 1 css 優先順序法則 a 選擇器都有乙個權值,權值越大越優先 b 當權值相等時,後出現的樣式...