首頁 > 開發者 > 網站開發

CSS選取器優先順序總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：相關   ack   nav   blog   匹配   組件   特性   active   查看   

CSS三大特性—— 繼承、 優先順序和層疊。

繼承：即子類元素繼承父類的樣式;

優先順序：是指不同類別樣式的權重比較;

層疊：是說當數量相同時，通過層疊(後者覆蓋前者)的樣式。

css選擇符分類　　

首先來看一下css選擇符(css選取器)有哪些?


　　1.標籤選取器(如：body,div,p,ul,li)

　　2.類別選取器(如：class="head",class="head_logo")

　　3.ID選取器(如：id="name",id="name_txt")

　　4.全域選取器(如：*號)

　　5.組合選取器(如：.head .head_logo,注意兩選取器用空格鍵分開)

　　6.後代選取器 (如：#head .nav ul li 從父集到子孫集的選取器)

　　7.群組選取器 div,span,img {color:Red} 即具有相同樣式的標籤分組顯示

　　8.繼承選取器(如：div p,注意兩選取器用空格鍵分開)

　　9.偽類別選取器(如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。)

　　10.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

　　11.子選取器 (如：div>p ,帶大於符號>)

　　12.CSS 相鄰兄弟選取器器 (如：h1+p,帶加號+)

css優先順序

當兩個規則都作用到了同一個html元素上時，如果定義的屬性有衝突，那麼應該用誰的值的，CSS有一套優先順序的定義。

不同層級

  1. 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
  2. 作為style屬性寫在元素內的樣式
  3. id選取器
  4. 類別選取器
  5. 標籤選取器
  6. 萬用字元選取器
  7. 瀏覽器自訂或繼承

      總結排序：!important > 行內樣式>ID選取器 > 類別選取器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

同一層級

同一層級中後寫的會覆蓋先寫的樣式

上面的層級還是很容易看懂的，但是有時候有些規則是多個層級的組合，像這樣

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div.test{            background-COLOR:#a00;            width:100px;            height: 100px;        }        .test.test2{            background-COLOR:#0e0;            width:100px;            height: 100px;        }    </style></head><body>    <div class="test test2"></div></body></html>

到底div是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際並不是按十進位，用數字表示只是說明思想，一萬個class也不如一個id權值高）

  • 內聯樣式表的權值為 1000
  • 識別碼選取器的權值為 100
  • Class 類別選取器的權值為 10
  • HTML 標籤選取器的權值為 1

 我們可以把選取器中規則對應做加法，比較權值，如果權值相同那就後面的覆蓋前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，所以div會應用.test1 .test2變成綠色

 

另外一種理解方式：

　　CSS優先順序：是由四個層級和各層級的出現次數決定的。

　　四個層級分別為：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

　　優先順序的演算法：

　　每個規則對應一個初始"四位元"：0、0、0、0

　　若是 行內選擇符，則加1、0、0、0

　　若是 ID選擇符，則加0、1、0、0

　　若是 類選擇符/屬性選擇符/偽類選擇符，則分別加0、0、1、0

　　若是 元素選擇符/虛擬元素選擇符，則分別加0、0、0、1

　　演算法：將每條規則中，選擇符對應的數相加後得到的”四位元“，從左至右進行比較，大的優先順序越高。　　

需注意的：

　　①、!important的優先順序是最高的，但出現衝突時則需比較”四位元“;

　　②、優先順序相同時，則採用就近原則，選擇最後出現的樣式;

　　③、繼承得來的屬性，其優先順序最低;

　　!important > 行內樣式>ID選取器 > 類別選取器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

　　*css選取器使用強烈建議採用低權重原則，利於充分發揮css的繼承性，複用性，模組化、組件化。

選取器的定位原則          以前一直認為選擇的定位是從左向右的方向，查看了網上的相關資料之後才發現原來自己一直都是錯的。鄭重的聲明選取器的定位是從右往左的方向，這樣的好處是儘早的過濾掉一些無關的樣式規則和元素。 簡潔、高效的css        所謂高效就是讓瀏覽器尋找更少的元素標籤來確定匹配的style元素。      1.不要再ID選取器前使用標籤名        解釋：ID選擇是唯一的，加上標籤名相當於畫蛇添足了，沒必要。      2.不要在類別選取器前使用標籤名      解釋：如果沒有相同的名字出現就是沒必要，但是如果存在多個相同名字的類別選取器則有必要添加標籤名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}      3.盡量少使用層級關係；         #divclass p.colclass{color:red;}改為  .colclass{color:red;}      4.使用類別選取器代替層級關係（如上） 

CSS選取器優先順序總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More