訊息佇列Kafka「檢索元件」重磅上線！
阿新 • • 發佈：2022-05-10
樣式應用優先順序
優先順序從高到低依次為
- 內聯樣式（例如
style="font-weigth:bold"） - id選擇器（例如
#example） - 類選擇器（例如
.example)，屬性選擇器（例如[type="radio"]）和偽類（例如:hover） - 型別選擇器（例如
h1）和偽元素（例如::before)
通配選擇符（*）關係選擇符（例如+, >, ~）和否定偽類（negation pseudo-class）（:not()）對優先順序沒有影響。（但是，在 :not() 內部宣告的選擇器會影響優先順序）。
當一個樣式宣告中使用!import時，此宣告將覆蓋其他任何宣告。
繼承的樣式永遠比直接新增的樣式優先順序低，例如
#parent {
color: green;
}
h1 {
color: purple;
}
當他應用在
<html>
<body id="parent">
<h1>Here is a title!</h1>
</body>
</html>
瀏覽器會將他渲染成紫色
Here is a title!
多選擇器權重的比較
網上流傳以內聯樣式開始到萬用字元權重依次為1000，100，10，1，0，當多個選擇器共同作用時將權值相加比較的做法在部分情況下可以生效但並不正確。
上述的0，1並不是十進位制的0和1，也不是二進位制，而是根據瀏覽器對權值和的具體計算方法決定的，例如在老版本的Firefox中權值實現方式如下：
id和類選擇器相差兩個16進位制，因此在老版本的Firefox中如果新增\(16^2=256\)
而按照css的意圖，不同型別的選擇器權重應該是相互隔離的。經過在新版的Edge，Safari上測試，上述現象已經不會發生。我電腦上沒有其他瀏覽器，有興趣的同學可以在其他瀏覽器上測試一下。
因此在計算優先順序時嚴謹的做法是計算每個選擇器的個數，個數大的優先順序高，相同時再向下一級的選擇器進行比較。例如下面的例子中字型顏色應該為orange
.outer .inner p {
color: orange;
}
.inner p {
color: blue;
}
<div class="outer"> <div class="inner"> <p>我是橘色</p> </div> </div>
我是橘色