根據獲取頁面中元素的不同，目前css選擇器主要分為五類：基本選擇器，組合選擇器，偽類選擇器，偽元素和屬性選擇器。
1.基本選擇器
基本選擇器主要分為標簽選擇器，類選擇器，ID選擇器和通配選擇器。
（1）標簽選擇器是css中使用率最高的一類選擇器，易於管理，它直接引用HTML標簽名稱，也稱為類型選擇器，類型選擇器規定了網頁元素在頁面中的顯示樣式。因此標簽選擇器可以快速，方便的控制頁面標簽的默認顯示效果。
1 <head> 2 <style> 3 p{ 4 font-size:12px; 5 color:red; 6 } 7 </style> 8 </head>
（2）類選擇器，是以（.）前綴開頭，然后跟隨一個自定義的類名，對應於html中的class屬性
1 <style> 2 .font18px{ 3 font-size:18px; 4 } 5 </style> 6 7 <p class="font18px">該段落字體大小設置為18px</p>
注：如果把標簽和類結合在一起來定義選擇器，則可以限定類的使用范圍，這樣就可以指定該類僅適用於特定的標簽范圍內，這種做法也稱為指定類選擇器。
1 <style> 2 p.font18px{ 3 font-size:18px; 4 } 5 </style> 6 <p class="font18px">樣式只對該段落有效</p> 7 <p>樣式對該段落無效，因為沒有類font18px的指定</p>
（3）ID選擇器，是以（#）前綴開頭，然后跟隨一個自定義的ID名，對應於HTML中的ID屬性。
1 <style type="text/css"> 2 #box{ 3 height:200px; 4 width:400px; 5 } 6 </style> 7 <div id="box">寬400px，高200px</div>
注：一般通過ID選擇器來定義HTML框架結構的布局效果，因為HTML框架元素的ID值都是唯一的。
（4）通配選擇器，如果HTML所有元素都需要定義相同的樣式，這時可選擇通配選擇器，通配選擇器是固定的，用星號（*）表示。
1 *{ 2 font-size：19px； 3 }
2.組合選擇器
當把兩個或者多個基本選擇器組合在一起時，便形成了一個復雜的選擇器，通過組合選擇器可以精確匹配頁面元素。主要包括：包含選擇器，子選擇器，相鄰選擇器，兄弟選擇器，分組選擇器。
（1）包含選擇器：包含選擇器通過空格標識符來表示，前面的一個選擇器表示包含框對象的選擇器，而后面的選擇器表示被包含的選擇器。
1 #header p{ 2 font-size : 18px; 3 }
表示的是從id =header中包含的所有p元素字體大小全部設置為18px，header為祖先，其他p為后代，即選中后代。不管是兒子還是孫子，只要是都會被選中。
（2）子選擇器：指定父元素所包含的子元素。子選擇器使用尖角號(>)表示。子選擇器只傳給兒子，孫子和其他堂親都不行。
1 div > span { 2 font-size:24px; 3 }
表示包含在div元素內的子元素span字體大小為24像素。通過這種方式，可以准確定義HTML文檔某個或一組子元素的樣式，而不再需要為它們定義id屬性或者class屬性。
（3）相鄰選擇器：通過（+）分隔符進行定義，前后選擇符的關系是兄弟關系。如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰選擇器。
1 p+h3{ 2 font-size:18px; 3 }
（4）兄弟選擇器：通過（~）分隔符進行定義，其基本結構是第一選擇器指定同級前置元素，后面的選擇器指定其后同級所有匹配元素。前后選擇符的關系是兄弟關系。簡言之，就是查找某一個指定元素的后面的所有兄弟結點。而先前介紹的相鄰選擇器只能查找緊接的那一個兄弟結點。
1 p~h3{ 2 font-size:18px; 3 }
（5）分組選擇器：通過（，）分隔符進行定義，其基本結構是第一個選擇器指定匹配元素，后面的選擇器指定另一個匹配元素，最后把前后選擇器匹配的元素全部都取出來，通過分組選擇器可以實現集體聲明，將樣式表中一致的css樣式放在一起，然后通過逗號連接這些選擇器，減少代碼的書寫量。
1 h1,h2,h3,h4{ 2 font-size:18px; 3 }
3.屬性選擇器
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-en）。
注：E表示匹配元素的選擇符，可以省略；中括號為屬性選擇器標識符，不可或缺；attr表示html屬性名，value表示html屬性值，或者html屬性值包含的子字符串，如a[title*="site"]，則可以匹配<a title="website"></a>，因為website中包含site子字符串。
4.偽類選擇器
偽類選擇器包含偽類和偽對象選擇器，偽選擇器以冒號（：）作為前綴標識符，冒號前可以添加選擇符，限定偽類應用的范圍，冒號后為偽類和偽對象名，冒號前后沒有空格，否則將錯認為類選擇器。偽類選擇器主要包括4種：動態偽類，結構偽類，否定偽類和狀態偽類，其基本寫法如下：
1 //單純式 2 E.pseudo-class{property:value} 3 a:link{color:red;} 4 //混用式 5 E.class:pseudo-class{property:value} 6 a.selected:hover{color:red;}
（1）動態偽類：動態偽類是行為類樣式，這些偽類並不存在於HTML中，只有當用戶與頁面交互時才能體現出來，動態偽類選擇器包含兩種形式：一種是錨點偽類，這是在鏈接中常見的樣式，如:link，:visited；另一種是行為偽類，也稱為用戶操作偽類，如:hover,:active,:focus。
1 //尊重先后順序：link-visited-hover-active 2 <style> 3 //鏈接沒有被訪問時前景色為灰色 4 .demo a:link{color:gray;} 5 //鏈接被訪問過后前景色為黃色 6 .demo a:visited{color:yellow;} 7 //鼠標懸浮在鏈接上時前景色為綠色 8 .demo a:hover{color:green;} 9 //鼠標擊中激活鏈接那一下前景色為藍色 10 .demo a:active{color:blue;} 11 </style>
（2）結構偽類：它是通過文檔結構樹實現元素過濾，通過文檔結構的相互關系來匹配特定的元素，從而減少文檔內class屬性和id屬性的定義，使得文檔更加簡潔。
1 :first-child //選擇某個元素的第一個子元素 2 :last-child //選擇某個元素的最后一個子元素 3 :nth-child() //選擇某個元素的一個或者多個特定的子元素 4 :nth-last-child() //選擇某個元素的一個或者多個特定的子元素，從這個元素的最后一個子元素開始計算 5 :nth-of-type() //選擇指定的元素 6 :nth-last-of-type() //選擇指定的元素，從元素的最后一個開始計算 7 :first-of-type //選擇一個上級元素下的第一個同類子元素 8 :last-of-type //選擇一個上級元素的最后一個同類子元素 9 :only-child //選擇的元素是它的父元素的唯一一個子元素 10 :only-of-type //選擇一個元素是它的上級元素的唯一一個相同類型的子元素 11 :empty //選擇的元素里面沒有任何內容
1 <style> 2 body{ 3 background:#ccc; 4 height:2617px; 5 width:980px; 6 } 7 #wrap{ 8 position:absolute; 9 width:249px; 10 height:249px; 11 z-index:1; 12 left:712px; 13 top:201px; 14 } 15 #wrap ul{ 16 list-style-type:none; 17 margin:0; 18 padding:0; 19 font-size:12px; 20 color:#777; 21 border:1px solid red; 22 } 23 #wrap li{ 24 background:url(image.JPG) no-repeat 2px 5px; 25 padding:1px 0px 0px 28px; 26 line-height:30px; 27 } 28 #wrap li a{ 29 text-decoration:underline; 30 color:#777; 31 } 32 #wrap li a:hover{ 33 color:blue; 34 } 35 #wrap li:first-child{ 36 background-position:2px 0px; 37 font-weight:bold; 38 } 39 #wrap li:last-child{ 40 background-position:2px -277px; 41 <!-- font-weight:bold; --> 42 } 43 #wrap li:nth-child(2){ 44 background-position:2px -31px; 45 } 46 #wrap li:nth-child(3){ 47 background-position:2px -72px; 48 } 49 #wrap li:nth-child(4){ 50 background-position:2px -113px; 51 } 52 #wrap li:nth-child(5){ 53 background-position:2px -154px; 54 } 55 #wrap li:nth-child(6){ 56 background-position:2px -195px; 57 } 58 #wrap li:nth-child(7){ 59 background-position:2px -236px; 60 } 61 62 #wrap li:nth-of-type(even){ 63 color:lightgray; 64 } 65 </style> 66 <body> 67 <div id="wrap"> 68 <ul id="container"> 69 <li><a href="#">送君千里，終須一別</a></li> 70 <li><a href="#">旅行的意義</a></li> 71 <li><a href="#">南師雖去，精神永存</a></li> 72 <li><a href="#">榴蓮糯米糍</a></li> 73 <li><a href="#">阿爾及利亞，天命之年</a></li> 74 <li><a href="#">白菜雞肉粉絲包</a></li> 75 <li><a href="#">展望塔上的殺人</a></li> 76 <li><a href="#">我們，只會在路上相遇</a></li> 77 </ul> 78 </div> 79 </body>
1 <style> 2 .post p{ 3 background-color:#efefef; 4 } 5 <!-- :only-child如果需要在div.post只有一個P元素的時候，改變這個p的樣式，那么便可以用:only-child選擇器來實現 --> 6 .post p:only-child{ 7 background-color:red; 8 } 9 <!-- :only-of-type表示一個元素中包含很多個子元素，而其中只有一個子元素唯一，那么久使用這個方法選中這個唯一的子元素 --> 10 .post p:only-of-type{ 11 background-color:blue; 12 } 13 </style> 14 <div class="post"> 15 <p>第一段文本內容</p> 16 <p>第二段文本內容</p> 17 18 </div> 19 <div class="post"> 20 <p>第三段文本內容</p> 21 </div> 22 <div class="post"> 23 <div>子塊一</div> 24 <p>文本段</p> 25 <div>子塊二</div> 26 </div>
（3）否定偽類：:not()表示否定選擇器，即排除或者過濾掉特定元素。前面介紹的選擇器都是匹配操作，而唯獨:not()操作相反，它表示過濾操作，與jquery中的:not()選擇器用法相同。
1 input:not([type="submit"]){ 2 border:1px solid red; 3 }
（4）狀態偽類：狀態偽類主要針對表單進行設計的，由於表單是UI設計的靈魂，UI元素的狀態一般包括：可用、不可用、選中、未選中、獲取焦點、失去焦點、鎖定、待機等。比如：:enabled, :disabled;:checked
（5）目標偽類：目標偽類選擇器形式如E:target，它表示選擇匹配E的所有元素，且匹配元素被相關URL指向。該選擇器是動態選擇器，只有當存在URL指向該匹配元素時，樣式效果才能有效。
1 <style> 2 div.target{ 3 background-color:red; 4 } 5 </style> 6 <div> 7 <div id="red">red</div> 8 <div id="blue">blue</div> 9 </div>
在鏈接中輸入#red，