css選擇器和優先級總結

本文轉自http://www.cnblogs.com/zxjwlh/p/6213239.html

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選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性

同一級別

同一級別中后寫的會覆蓋先寫的樣式

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

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

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

　　優先級的算法：

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

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

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

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

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

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

SS選擇器的解析原則

         以前一直認為選擇器的定位DOM元素是從左向右的方向，查看了網上的相關資料之后才發現原來自己一直都是錯的。鄭重的聲明選擇器定位DOM元素是從右往左的方向，這樣的好處是盡早的過濾掉一些無關的樣式規則和元素 。 為什么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.使用類選擇器代替層級關系（如上）