《CSS3基本選擇器》 一、萬用字元選擇器（＊）*{marigin:0;padding:0;}二、元素選擇器(E)li {background-color: grey;color: orange;}三、類選擇器（.className）四、id選擇器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、後代選擇器（ＥＦ）.demo li {color: blue;}六、子元素選擇器(E>F)ul > li {background: green;color: yellow;}七、相鄰兄弟元素選擇器(

E + F)li + li {background: green;color: yellow; border:1px solid #ccc;}八、通用兄弟選擇器（Ｅ〜Ｆ）.active ~ li {background: green;color: yellow; border:1px solid #ccc;}九、群組選擇器（selector1,selector2,...,selectorN）.first,.last {background: green;color: yellow; border:1px solid #ccc;}

CSS3的屬性選擇器主要包括以下幾種：

1. E[attr]
   ：只使用屬性名，但沒有確定任何屬性值；
2. E[attr="value"]：指定屬性名，並指定了該屬性的屬性值；
3. E[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫；
4. E[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；
5. E[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；
6. E[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；
7. E[attr|="value"]：指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;
8. .demo a[href][title]{background: yellow; color:green;}//存在href 和title 被選中.demo a[id="first"]{background: blue; color:yellow;font-weight:bold;}//id="first"被選中

1、這是最常用的動態偽類
.demo a:link {color:gray;}/*連結沒有被訪問時前景色為灰色*/.demo a:visited{color:yellow;}/*連結被訪問過後前景色為黃色*/.demo a:hover{color:green;}/*滑鼠懸浮在連結上時前景色為綠色*/.demo a:active{color:blue;}/*滑鼠點中啟用連結那一下前景色為藍色*/ 2、UI元素狀態偽類 ":enabled",":disabled",":checked"偽類稱為UI元素狀態偽類，這些主要是針對於HTML中的Form元素操作，最常見的比如我們"type="text"有enable和disabled兩種狀態，前者為可寫狀態後者為不可狀態；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態。來看兩個例項，比如說你想將"disabled"的文字框與別的文字框區別出來，你就可以這樣應用 ； IE6-8不支援":checked",":enabled",":disabled"這三種選擇器
3、:nth選擇器 :fist-child選擇某個元素的第一個子元素； :last-child選擇某個元素的最後一個子元素； :nth-child()選擇某個元素的一個或多個特定的子元素； :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算； :nth-of-type()選擇指定的元素； :nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算； :first-of-type選擇一個上級元素下的第一個同類子元素； :last-of-type選擇一個上級元素的最後一個同類子元素； :only-child選擇的元素是它的父元素的唯一一個了元素； :only-of-type選擇一個元素是它的上級元素的唯一一個相同型別的子元素； :empty選擇的元素裡面沒有任何內容。 IE6-8和FF3-瀏覽器不支援":nth-child，:nth-last-child()，：nth-of-type"選擇器 4、否定選擇器（:not） 否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來說明這個選擇器的用法，比如你想對form中所有input加邊框，但又不想submit也起變化，此時就可以使用:not為實現 input:not([type="submit"]){border:1px solid red;} 5、偽元素     CSS中的偽元素大家以前看過：:first-line,:first-letter,:before,:after;那麼在CSS3中，他對偽元素進行了一定的調整，在以前的基礎上增加了一個“：”也就是現在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個“::selection”,兩個“：：”和一個“：”css3中主要用來區分偽類和偽元素，到目前來說，這兩種方式都是被接受的，也就是說不管使用哪種寫法所起的作用都是一樣的，只是一個書寫格式不同而以。 那麼我們簡單瞭解一下他們的作用 ::first-line選擇元素的第一行，比如說改變每個段落的第一行文字的樣式，我們就可以使用這個。 ::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常用"content"配合使用，見過最多的就是清除浮動 .clearfix:before,.clearfix:after { content:"."; display: block; height:0; visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom:1;} 固有效率： id選擇器（#myid）
類選擇器（.myclassname）標籤選擇器（div,h1,p）相鄰選擇器（h1+p）子選擇器（ul > li）後代選擇器（li a）萬用字元選擇器（*）屬性選擇器（a[rel="external"]）偽類選擇器（a:hover,li:nth-child）