CSS選擇器的優先級順序是什么

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

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

1、!important 表示最高優先級。ie6瀏覽器不認識 !important 。

舉例：

正常情況下，寫在下面的樣式優先級高于上面的樣式

demo1{
color:red;
color:green; /*綠色的優先級高于紅色，所有瀏覽器都會顯示綠色*/
}

加了!important 那么它的優先級會比較高，ie6比較傻，不認識。

demo2 {
color:red !important; /*除了ie6，其他瀏覽器會認為紅色優先級高，顯示紅色字體*/
color:green; /*ie6瀏覽器則順序讀取css所以顯示綠色*/
}

但是注意，ie6不認識!important的優先級，但并不代表ie6不認識帶!important的樣式屬性。

demo3{
color:red;
color:green !important; /*包括ie6，所有瀏覽器都顯示綠色字體，ie6只是不認識優先級罷了*/
}

2、CSS (Cascading Style Sheets) 級聯樣式表，在實際應用中，一般有以下三種級聯方式。

優先級：內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)。

1. 外聯式（應用于多個網頁）

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

示例代碼如下：

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

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

2. 內聯式（應用于當前頁面）

門戶網站的 CSS 代碼通常采用嵌入式，即通常所說的內聯方式 (Inline Style)，其使用 <style> 標記將樣式定義為內部塊對象。

示例代碼如下：

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

內聯 CSS 可以有效減少 HTTP 請求，提升頁面性能，緩解服務器壓力。由于瀏覽器加載完 CSS 才能渲染頁面，因此能防止 CSS 文件無法讀取而造成頁面裸奔的現象。

3. 嵌入式(應用于具體的標簽)

最初級的 CSS 寫法即把代碼直接添加于所修飾的標記元素。

示例代碼如下：

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

這樣做雖然更為直觀，但很大程度上加大了頁面體積，不符合結構與表現分離的設計思想。

3、權值不同時,瀏覽器是根據權值來判斷使用哪種選擇器的css樣式,樣式權值高的就使用哪種樣式。

權值規則:標簽（P、span）的權值為1,類選擇器的權值為10,id選擇器的權值最高為100。

舉例:

div {color: red;} /*標簽,權值為1*/

div span {color: green;} /*兩個標簽,權值為1+1=2*/

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

.main {color: white;} /*類選擇符,權值為10*/

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS選擇器的優先級順序是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!