一、什麼是CSS設定優先權？
CSS（Cascading Style Sheets），層疊樣式表，用來為網頁新增樣式。但是，當多個CSS規則對同一個元素進行樣式設定時，就會產生樣式的優先權問題。 CSS設定優先順序就是解決這個問題的方法。
在CSS中，每種規則都有一定的權重，權重高的規則會覆蓋權重低的規則，從而實現樣式的優先權。 CSS設定優先權涉及到4個因素：選擇器、類別、ID和樣式的順序。
二、CSS設定優先權的權重規則
1.選擇器的權重
在CSS中，選擇器分為元素選擇器、類別選擇器和ID選擇器。在樣式衝突時，選擇器的權重會依照下列順序遞增：
元素選擇器（1）
類別選擇器（10）
ID選擇器（100）
2.類別和屬性的權重
類別和屬性的權重和選擇器的權重相同，在樣式衝突時，它們也是依照上述遞增的規則決定優先權。
3.樣式的順序
在樣式衝突時，後面定義的樣式會取代先前定義的樣式。因此，如果有相同權重的樣式定義，最後定義的樣式會覆蓋前面的樣式。
4.!important關鍵字
在CSS中，!important關鍵字可以讓樣式定義具有最高的權重，無論選擇器、類別、ID或順序如何，都會覆寫其他定義。但是，這種方式應該盡量避免使用，因為它會破壞樣式的繼承性和可讀性。
三、CSS設定優先權的實例
為了更好地理解CSS設定優先權，以下是一些實例：
1.選擇器的優先權
下面的樣式規則將優先套用於div元素：
div{
font-size: 22px; color: red;
}
/元素選擇器/
p{
font-size: 18px; color: blue;
}
/元素選擇器/
.container div{
font-size: 14px; color: green;
}
/類別選擇器 /
.class1{
font-size: 24px; color: yellow;
}
/ID選擇器/
font-size: 28px; color: purple;
}
#2.後面定義的樣式優先權高
在下面的樣式規則中，後面定義的顏色優先權高：
p{
color: red;
}
p {
color: blue;
}
3.!important的優先權最高
#下面的樣式規則中，color: yellow;的優先權最高，將優先權套用於p元素：
p{
color: red!important; font-size: 18px; color: blue;
}
p{
color: yellow;
}
四、總結
CSS設定優先權是為了解決樣式衝突問題而引進的。在樣式衝突時，選擇器、類別、ID和樣式的順序都會影響優先權。了解CSS設定優先權的規則可以更好地解決樣式問題，提高開發效率。
以上是css怎麼設定優先權（權重規則）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
