css權重計算方法淺談

在這之前隻知道css權重的皮毛，比如說：行内權重比頭部權重高，頭部比外部樣式權重高…………工作中才知道真正了解css權重重要性。了解權重了才能寫出來最優css選擇器來。對後面學習less，scss有很大幫助。

　　從css代碼存放的位置來看，權重計算當然是--->内嵌樣式 > 内部樣式表 > 外聯樣式表!然而工作中我們的css代碼都是寫在外聯樣式表中的咯。

　　參考w3c樣式選擇器權重優先級是這個樣子的

　　important > 内嵌樣式 > ID > 類 > 标簽 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符

　　有一種計算權重方法當然是不是官方有待考究

　　important　　1　　0　　0　　0

　　id 　　　　　0　　1　　0　　0

　　class　　　　0　　0　　1　　0

　　tag(标簽)　　0　　0　　0　　1

　　僞類　　　　 0　　0　　1　　0

　　att屬性 　　 0　　0　　1　　0

　　僞對象　 　　0　　0　　0　　1

　　通配符　　 　0　　0　　0　　0　　

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準确，它的優先級就越高。通常我們用1表示标簽名選擇器的優先級，用10表示類選擇 器的優先級，用100标示ID選擇器的優先級。比如 .polaris span {color:red;}的選擇器優先級是 10 + 1 也就是11；而 .polaris 的優先級是10；

    div.test1 .span var 優先級 1+10 +10 +1  

    span#xxx .songs li 優先級1+100 + 10 + 1  

    #xxx li 優先級 100 +1 

對于什麼情況下使用什麼選擇器，用不同選擇器的原則是：第一：準确的選到要控制的标簽；第二：使用最合理優先級的選擇器；第三：HTML和CSS代碼盡量簡潔美觀。

　　選擇器種類

　　嚴格意義上說CSS的選擇器分類隻能分成三種，标簽名、類選擇器、ID選擇器。當然這也是設計之初就這麼設計的。後面的選擇器都是由于特殊需求添加的，當初我學習的時候就這些選擇器也是夠用的了！

　　标簽選擇器：p{}

　　類選擇 ： .container{}

　　ID : 選擇器 #logo{} 

當然了ID選擇器在一個頁面裡面你隻能有一個，多個的話當然不會報錯，畢竟CSS不是程式設計語言嘛！但是背景開發人員經常使用ID，如果不幸他命名規則和你定義一樣的，那這個錯誤就不好找出來了。

　　擴充選擇器：

　　　　後代選擇器：p span a{}; 後代選擇就是在上一個選擇器的後面加一個空格接着寫選擇器。這麼寫比對到的标簽就更少了。當然權重就會更高了！

　　　　群組選擇器 ： p,div,img{};群組選擇器是當多個标簽都需要同樣的樣式的時候，用一個逗号分隔開多個選擇器。這樣寫法會節省很多代碼量

下面介紹一下css2,css3中的選擇器

　　　　CSS1&2中的選擇器介紹

　　　　CSS3 新增選擇器介紹

　　　　CSS3屬性選擇器

　　　　CSS3結構僞類選擇器

　　　　CSS3UI元素狀态僞類選擇器

　　　　CSS3其他新增選擇器

CSS1&2元素選擇器

　　元素選擇器

　　　　* 通用選擇器

　　　　E 元素選擇器

　　　　E#Id id選擇器

　　　　E.class 類選擇器

　　關系選擇器

　　　　E F 包含選擇器 E元素包含的F元素。

　　　　E>F 子選擇器 選擇E元素的子元素F

　　　　E+F 相鄰選擇器 E元素之後F元素

　　僞類選擇器

　　　　E:link 連結僞類 未被通路前樣式

　　　　E:visited 以被通路過的樣式

　　　　E:hover 滑鼠懸停時的樣式

　　　　E:active 滑鼠點選與釋放之間

　　　　E:focus 元素成為輸入焦點

　　　　E:lang 比對使用特殊語言的E元素

　　屬性選擇器

　　　　E[att] 選擇具有att屬性的E元素

　　　　E[att="val"] 選擇具有att屬性且屬性值為val的E元素

　　　　E[att~="val"] 選擇具有att屬性且屬性值為用空格分隔的字詞清單，其中一個等于val的E元素

　　　　E[att|="val"] 具有att屬性且元素值為以val開頭并用連接配接符-分隔的字元串的E元素

　　僞對象選擇器

　　　　E:first-letter 設定對象内的第一個字元的樣式。

　　　　E:first-line設定對象内的第一行的樣式

　　　　E:before設定在對象前發生的内容，用來和content屬性一起使用

　　　　E:after設定在對象後發生的内容，用來和content屬性一起使用。

　　CSS3新增選擇器 4個

　　　　E F 包含選擇器

　　　　E>F 子選擇器

　　　　E+F相鄰選擇器

　　　　E~F兄弟選擇符

　　P~P{color:#f00} 選擇的是第一個P後面的P元素。（隻能選擇它後面的兄弟）

　　結構僞類選擇器

　　　　E:root E在文檔的根元素

　　　　E:first-child父元素的第一個子元素E

　　　　E:last-child父元素的最後一個子元素E

　　　　E:only-child父元素僅有的一個子元素E

　　　　E:nth-child(n)父元素的第n個子元素E

　　　　E:nth-last-child(n)父倒數第n個子元

　　　　E:first-of-type同類型中的第一個同級兄弟元素E

　　　　E:last-of-type同類型中最後一個同級兄弟元素E.

　　　　E:only-of-type同類型中唯一的一個同級兄弟元素E

　　　　E:nth-of-type(n)同類型中第n個同級兄弟元素E.

　　　　E:nth-last-of-type(n)比對同類中倒數第n個同級兄弟元素E

　　　　E:empty沒有任何子元素包括text節點的元素E.

　　　　P:first-child{}解讀，先找到P元素，再找他的父節點，從父節點去找第一個元素為P的節點。

　　　　P:last-child{}和ｐ:first-child{}差不多

　　　　li:nth-child(2){}選中指定序号。找li父元素ul，找到ul的第二個子元素是否是li,是就選中。

　　　　li:nth-child(even){}/*even選中偶數，odd選中奇數*/

　　　　li:nth-child(3n+1){}/*自定義序列類型（正序）*/

　　　　li:nth-last-child(){}/*是nth-child()的倒序*/

　　　　P:first-of-type{}找到第一個是P标簽的元素。

　　　　上面的标簽可分為 child系類和of-type系列

　　　　E:root{}用法隻有一個，

　　　　html:root{},其他标簽都沒有用。這個選擇器我隻在bootstrap中見過！可能它真的有用吧

　　

簡潔、高效的CSS

所謂高效的CSS就是讓浏覽器在查找style比對的元素的時候盡量進行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤：

◆不要在ID選擇器前使用标簽名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋： 因為ID選擇器是唯一的，加上div反而增加不必要的比對。

◆不要再class選擇器前使用标簽名

一般寫法：span.red

更好寫法：.red

解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：

    p.red{color:red;}  

    span.red{color:#ff00ff} 

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫

◆盡量少使用層級關系

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

◆使用class代替層級關系

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}