CSS 樣式優先級是指在同一元素上應用多個 CSS 樣式時,哪個樣式會被應用。CSS 樣式的優先級是根據其來源和特定性度量的。
CSS 樣式的來源包括:瀏覽器默認樣式、用戶樣式表和開發人員編寫的 CSS 樣式表。優先級從高到低順序如下:
1、!important 2、內聯樣式 3、ID 選擇器 4、類選擇器、屬性選擇器、偽類 5、元素選擇器、偽元素選擇器 6、通配符選擇器、子選擇器、相鄰選擇器、后代選擇器 7、瀏覽器默認樣式
在同一元素上應用多個 CSS 樣式時,樣式的優先級會對每個樣式的屬性進行比較,從而確定應該使用哪個樣式。
如果在一個聲明中使用了!important
關鍵字,則該樣式將具有最高優先級,不管它在哪里定義。在相同的元素上應用多個具有!important
的樣式時,具有更高特定性的樣式將具有更高的優先級。
在相同的元素上使用內聯樣式(即在 HTML 標簽的style
屬性中指定樣式)和通過 CSS 選擇器指定樣式時,內聯樣式將具有更高的優先級。
應用在元素 ID 選擇器上的樣式具有更高的優先級。如果在相同的元素上應用多個具有 ID 選擇器的樣式,則具有更高特定性的樣式將具有更高的優先級。
應用在類選擇器、屬性選擇器和偽類上的樣式具有相同的優先級。如果應用在相同元素上的多個 class、屬性選擇器或偽類名稱,最后編寫的樣式將具有優先權。
如果所有選擇器都相同,那么應用在相同元素上的元素選擇器和偽元素選擇器將具有相同的優先級。
當使用通配符選擇器、子選擇器、相鄰選擇器或后代選擇器時,將會為每個選擇器分配特定性值。具有更高特定性值的選擇器將具有更高的優先級。
在 CSS 中,特定性是一個由四個值表示的數字。每個選擇器部分都有自己的特定性等級:1000 表示一個 ID 選擇器,100 表示一個類、屬性選擇器或偽類,1 表示一個元素選擇器或偽元素選擇器。如果樣式在 HTML 標簽上通過style
屬性定義,則它將具有最高特定性值(1000 個 ID)。