CSS 選擇器權值

xuyaoxiang發表於2020-02-03
CSS

CSS 選擇器優先順序規則
同一樣式表中：
1. 權值相同：就近原則（離被設定元素越近優先順序越高）
2. 權值不同：根據權值來判斷 CSS 樣式，哪種權值高，就使用哪種樣式
選擇器的權值：
便籤選擇器：權值為 1

<div></div>

類選擇器和偽類：權值為 10

.p

ID 選擇器：權值為 100

#div

萬用字元選擇器：權值為 0

  • { color : red; }

行內樣式：權值為 1000

<p style="color:blue">藍色<p>

調整優先順序用！important 新增在樣式規則之後，中間用空格隔開

#example{
　　color:red!important;
}

例子

 <style>
        span{color: red;}
        div p span{ color: yellow;}
        #div p span {color: green;}
        #div .p span {color: beige;}
    </style>
    <div id="div">
        <p class="p">
            <span>
                權值相同，就近原則，權重不同，哪個權值高，用哪個。
            </span>
        </p>
    </div>

文字最終顯示為藍色

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章