CSS選擇器優(yōu)先級(jí)權(quán)重

CSS 的選擇器是必學(xué)內(nèi)容，多種選擇器都有各自的用法，本篇文章來(lái)為您介紹選擇器的優(yōu)先級(jí)。

一、優(yōu)先級(jí)的分類(lèi)

我們可以把 CSS 的優(yōu)先級(jí)從高到低來(lái)分成6級(jí)：

第一級(jí)別：無(wú)優(yōu)先條件的屬性我們只要在屬性后添加 ?!important ?即可。這個(gè)屬性可以覆蓋此頁(yè)面所有位置定義的同種元素樣式。

第二級(jí)別：在元素標(biāo)簽內(nèi)直接添加 style ，俗稱(chēng)內(nèi)聯(lián)樣式。

第三級(jí)別：ID 選擇器。例：#id{color:red;}

第四級(jí)別：類(lèi)選擇器，屬性選擇器或者偽類(lèi)選擇器。例：.one{color:blue;}

第五級(jí)別：元素選擇器。例：div{color:yellow;}

第六級(jí)別：統(tǒng)配選擇器。例：*{color:green;}

二、選擇器的權(quán)重和優(yōu)先規(guī)則

CSS 會(huì)依據(jù)選擇器其特殊性質(zhì)來(lái)規(guī)定它定義的樣式權(quán)重次序，在更特殊的選擇器權(quán)重優(yōu)先于一般選擇器的規(guī)則。如果有兩個(gè)相同特殊性的選擇器，那么后面定義的選擇器優(yōu)先。

如何去計(jì)算選擇器的特殊性？我們來(lái)試著計(jì)算一下選擇器的權(quán)重，如下圖：

如圖所示，我們把選擇器特殊性分為4個(gè)等級(jí)，每個(gè)等級(jí)是一種選擇器，每個(gè)等級(jí)的值加起來(lái)就是該選擇器的權(quán)重。

四個(gè)等級(jí)定義如下：

第一級(jí)：內(nèi)聯(lián)樣式，例：style=""，它的權(quán)值為1000

第二級(jí)：ID選擇器，例：#id，它的權(quán)值為100

第三級(jí)：class選擇器，例：.one，它的權(quán)重為10

第四級(jí)：元素選擇器，例：div,p,h1 ，它的權(quán)重為1

以上就是為大家整理的關(guān)于CSS選擇器權(quán)重優(yōu)先規(guī)則。