首頁  >  文章  >  web前端  >  深入理解CSS選擇器的優先順序

深入理解CSS選擇器的優先順序

yulia
yulia原創
2018-09-18 15:03:312467瀏覽

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 中的外部級聯採用 2cdf5bf648cf2f33323966d7f58a7f3f 標記或 @import 語句來引入。

範例程式碼如下:

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

2cdf5bf648cf2f33323966d7f58a7f3f 和@import 的異同見其文章

2. 內聯式(套用於目前頁面)

入口網站的CSS 程式碼通常採用嵌入式,即通常所說的內聯方式(Inline Style),其使用c9ccee2e6ea535a969eb3f532ad9fe89 標記將樣式定義為內部區塊物件。

範例程式碼如下:

<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選擇器的優先順序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn