根据获取页面中元素的不同，目前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，