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;}