CSS選擇器的優(yōu)先級(jí)順序是什么

這篇文章主要介紹了CSS選擇器的優(yōu)先級(jí)順序是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS中有很多選擇器，比如類選擇器，標(biāo)簽選擇器，ID選擇器等等，不同選擇器之間的優(yōu)先級(jí)順序也不一樣，今天就和大家聊聊CSS選擇器的優(yōu)先級(jí)順序，以及、!important的使用，有需要的朋友可以參考一下，希望對(duì)你有用。

1、!important 表示最高優(yōu)先級(jí)。ie6瀏覽器不認(rèn)識(shí) !important 。

舉例：

正常情況下，寫在下面的樣式優(yōu)先級(jí)高于上面的樣式

demo1{
color:red;
color:green; /*綠色的優(yōu)先級(jí)高于紅色，所有瀏覽器都會(huì)顯示綠色*/
}

加了!important 那么它的優(yōu)先級(jí)會(huì)比較高，ie6比較傻，不認(rèn)識(shí)。

demo2 {
color:red !important; /*除了ie6，其他瀏覽器會(huì)認(rèn)為紅色優(yōu)先級(jí)高，顯示紅色字體*/
color:green; /*ie6瀏覽器則順序讀取css所以顯示綠色*/
}

但是注意，ie6不認(rèn)識(shí)!important的優(yōu)先級(jí)，但并不代表ie6不認(rèn)識(shí)帶!important的樣式屬性。

demo3{
color:red;
color:green !important; /*包括ie6，所有瀏覽器都顯示綠色字體，ie6只是不認(rèn)識(shí)優(yōu)先級(jí)罷了*/
}

2、CSS (Cascading Style Sheets) 級(jí)聯(lián)樣式表，在實(shí)際應(yīng)用中，一般有以下三種級(jí)聯(lián)方式。

優(yōu)先級(jí)：內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)。

1. 外聯(lián)式（應(yīng)用于多個(gè)網(wǎng)頁）

外聯(lián)式樣式表中，CSS 代碼作為文件單獨(dú)存放，如以 style.css 文件包含所有樣式。在 HTML 中的外部級(jí)聯(lián)采用 <link> 標(biāo)記或者 @import 語句來引入。

示例代碼如下：

<link rel="stylesheet" href="style.css" type="text/css" /> //link 鏈接
@import url("style.css"); //@import 導(dǎo)入

<link> 和 @import 的異同見其文章

2. 內(nèi)聯(lián)式（應(yīng)用于當(dāng)前頁面）

門戶網(wǎng)站的 CSS 代碼通常采用嵌入式，即通常所說的內(nèi)聯(lián)方式 (Inline Style)，其使用 <style> 標(biāo)記將樣式定義為內(nèi)部塊對(duì)象。

示例代碼如下：

<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>

內(nèi)聯(lián) CSS 可以有效減少 HTTP 請(qǐng)求，提升頁面性能，緩解服務(wù)器壓力。由于瀏覽器加載完 CSS 才能渲染頁面，因此能防止 CSS 文件無法讀取而造成頁面裸奔的現(xiàn)象。

3. 嵌入式(應(yīng)用于具體的標(biāo)簽)

最初級(jí)的 CSS 寫法即把代碼直接添加于所修飾的標(biāo)記元素。

示例代碼如下：

<div style="font-family:Arial,Helvetica,sans-serif;">餓了么</div>

這樣做雖然更為直觀，但很大程度上加大了頁面體積，不符合結(jié)構(gòu)與表現(xiàn)分離的設(shè)計(jì)思想。

3、權(quán)值不同時(shí),瀏覽器是根據(jù)權(quán)值來判斷使用哪種選擇器的css樣式,樣式權(quán)值高的就使用哪種樣式。

權(quán)值規(guī)則:標(biāo)簽（P、span）的權(quán)值為1,類選擇器的權(quán)值為10,id選擇器的權(quán)值最高為100。

舉例:

div {color: red;} /*標(biāo)簽,權(quán)值為1*/

div span {color: green;} /*兩個(gè)標(biāo)簽,權(quán)值為1+1=2*/

div>span {color: purple;} /*權(quán)值與上面的相同,因此采取就近原則*/

.main {color: white;} /*類選擇符,權(quán)值為10*/

div span.warning {color: purple;} /*權(quán)值為1+1+10=12*/

#main .con p {color: yellow;}  /*權(quán)值為100+10+1=111*/

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS選擇器的優(yōu)先級(jí)順序是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!