小結一下前端html+css的經驗（二）css選擇符分類介紹

請原諒不能貼出網址了，我本身也找不到從哪裏轉載來的，且這文章搜一下，被轉載了太屢次啦，我小小的修改下。

 1.通配選擇符

 語法： * { sRules }  說明： 通配選擇符。選定文檔目錄樹(DOM)中的全部類型的單一對象。 假如通配選擇符不是單一選擇符中的惟一組成，「*」能夠省略。

示例： *[lang=fr] { font-size:14px; width:120px; } 

2.標籤選擇符

 語法： E { sRules }  說明：標籤選擇符。以文檔語言對象(Element)類型做爲選擇符。

示例： td { font-size:14px; width:120px; } a { text-decoration:none; } 

3.屬性選擇符

 語法：I、 E [ attr ] { sRules }；選擇具備 attr 屬性的 E

           II、E [ attr = value ] { sRules }；選擇具備 attr 屬性且屬性值等於 value 的 E

           III、E [ attr ~= value ] { sRules }；選擇具備 attr 屬性且屬性值爲一用空格分隔的字詞列表，其中一個等於                          value 的 E 。這裏的 value 不能包含空格  

           IV、E [ attr |= value ] { sRules }；選擇具備 attr 屬性且屬性值爲一用連字符分隔的字詞列表，由 value 開始的 E

示例： h[title] { color: blue; } /* 全部具備title屬性的h對象 */

           span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a[rel~="copyright"] { color:black; } 

4.包含選擇符

 語法： E1 E2 { sRules }

說明： 包含選擇符。選擇全部被 E1 包含的 E2 。即 E1.contains(E2)==true 。

示例： table td { font-size:14px; }；  div.sub a { font-size:14px; } 

5.子對象選擇符

 語法： E1 > E2 { sRules }

 說明： 子對象選擇符。選擇全部做爲 E1 子對象的 E2 ，且是一級子對象，注意不是孫，是子哦。

示例： body > p { font-size:14px; } /* 全部做爲body的子對象的p對象字體尺寸爲14px */

 div ul>li p { font-size:14px; } 

6.ID選擇符

 語法： #ID { sRules }

說明： ID選擇符。以文檔目錄樹(DOM)中做爲對象的惟一標識符的 ID 做爲選擇符。

示例： #note { font-size:14px; width:120px;}

7.類選擇符

 語法： E.className { sRules } 

說明： 類選擇符。在HTML中能夠使用此種選擇符。其效果等同於E [ class ~= className ] 。請參閱屬性選擇符

 在IE5+，能夠爲對象的 class 屬性(特性)指定多於一個值( className )，其方法是指定用空格隔開的一組樣式表的類名。例如：<div class="class1 class2">。

示例： div.note { font-size:14px; } /* 全部class屬性值等於（包含）"note"的div對象字體尺寸爲14px */

 .dream { font-size:14px; } /* 全部class屬性值等於（包含）"note"的對象字體尺寸爲14px */ 

8.選擇符分組

 語法： E1 , E2 , E3 { sRules } 

說明： 選擇符分組。將一樣的定義應用於多個選擇符，能夠將選擇符以逗號分隔的方式併爲組。

示例： .td1,div a,body { font-size:14px; }； td,div,a { font-size:14px; } 

9.僞類及僞對象選擇符

 語法： E : Pseudo-Classes { sRules } ； E : Pseudo-Elements { sRules } 

說明： 僞類及僞對象選擇符。 [:link :hover :active :visited :focus :first-child :first :left :right :lang]。

僞對象選擇符。請參閱僞對象( Pseudo-Elements )[:first-letter :first-line :before :after]。

示例： div:first-letter { font-size:14px; } a.fly :hover { font-size:14px; color:red; }

css權重：important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符 通配符 > 繼承

此外，值得一提的是，css選擇符是能夠混合使用的，這也意味着，權重是能夠累加的，這個算法，我就不總結了，參考單個權重累計權衡下就能夠了。