日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

css選擇器優先級問題

作者:SSS4362 更新時間: 2022-07-10 編程語言

css選擇器優先級問題(選擇器的權重圖)

A.為啥有此問題的產生?

a.眾所周知,css對于同一屬性先進行優先級別的判斷,若比之前渲染的優先級別高,那么就會渲染成這個優先級別較高的。

b.對于單一的選擇器而言,優先級別有固定的順序,按照這個優先級別去設置同一樣式,就不會出現樣式覆蓋,但是如果遇到了中級選擇器(如派生選擇器),該如何判斷優先級別呢?

因此就提出了選擇器權重規則

B.選擇器權重圖如下所示:

選擇器 權重
!important 無窮大
行內樣式(標簽里面寫style) 1000
id選擇器 100
類選擇器(class) 10
屬性選擇器([屬性名=屬性值]) 10
偽元素 10
標簽選擇器§ 1
偽類 1
通配符 0

C.中級選擇器甚至更復雜的選擇器如何進行權重的計算呢?

1.以下面的源代碼為例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇器權重問題</title>
   <style type="text/css">
       div > #content span{
           color: brown;
           font-family: "宋體";
       }
       div .one span{
           color: pink;
           font-family: "楷體";
       }
   </style>
</head>
<body>
    <div>
        <div class="one" id="content"><span>堅持,不只是為了離夢想更近一步</span></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

2.分析

選擇器的執行順序是從上往下的

那么div .one span這個選擇器在 div > #content span選擇器之后,為啥不會顯示后者所編寫的css樣式,而是選擇顯示前者的css樣式呢?
我們給div .one span選擇器取名為m,div > #content span選擇器取名為n

那么m的權重=標簽選擇器權重×1+類選擇器權重×1+標簽選擇器×1

? =1+10+1=12

????????n的權重=標簽選擇器權重×1+id選擇器權重×1+標簽選擇器×1

? =1+100+1=102

m的權重<n的權重

因此n的優先級別高,不用管其在css里面的位置,只要寫了,就一定是它優先執行

不會被后面比它優先級小的選擇器修改樣式

總結:復雜的選擇器權重=單個選擇器權重之和

3.運行結果

在這里插入圖片描述

原文鏈接:https://blog.csdn.net/SSS4362/article/details/125454833

欄目分類
最近更新