通用選擇器（*）具有較低的特異性，而 ID 選擇器具有較高的特異性！

特異性層次

每個(gè)選擇器在特異性層次結(jié)構(gòu)中都有其位置。以下四種類別定義了選擇器的特異性級(jí)別：

行內(nèi)樣式?- 行內(nèi)（內(nèi)聯(lián)）樣式直接附加到要設(shè)置樣式的元素。實(shí)例：<h1 style="color: #ffffff;">。

ID?- ID 是頁面元素的唯一標(biāo)識(shí)符，例如 #navbar。

類、屬性和偽類?- 此類別包括 .classes、[attributes] 和偽類，例如：:hover、:focus 等。

元素和偽元素?- 此類別包括元素名稱和偽元素，比如 h1、div、:before 和 :after。

特異性規(guī)則 1：

在特異性相同的情況下：最新的規(guī)則很重要?- 如果將同一規(guī)則兩次寫入外部樣式表，那么樣式表中后面的規(guī)將更靠近要設(shè)置樣式的元素，因此會(huì)被應(yīng)用：

實(shí)例

h1 {background-color: yellow;} h1 {background-color: red;}

親自試一試

后一條規(guī)則始終適用。

特異性規(guī)則 2：

ID 選擇器比屬性選擇器擁有更高的特異性

實(shí)例

div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;}

親自試一試

第一條規(guī)則比其他兩條更具體，因此將被應(yīng)用。

?

特異性規(guī)則 3：

上下文選擇器比單一元素選擇器更具體?- 嵌入式樣式表更靠近要設(shè)置樣式的元素。所以在以下情況下：

實(shí)例

來自外部 CSS 文件：#content h1 {background-color: red;}在 HTML 文件中：<style> #content h1 {background-color: yellow; } </style>

將適用后一條規(guī)則。

?

特異性規(guī)則 4：

類選擇器會(huì)擊敗任意數(shù)量的元素選擇器?- 類選擇器（諸如 .intro 會(huì)擊敗 h1、p、div 等）：

實(shí)例

.intro {background-color: yellow;} h1 {background-color: red;}

親自試一試

?

此外，通用選擇器以及被繼承的值擁有 0?- * 的特異性，body * 及類似擁有 0 的特異性。被繼承的值的特異性也為 0。

?

?

總結(jié)

以上是生活随笔為你收集整理的CSS 特异性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。