1.通配选择器
匹配所有元素
*{color:red;}
2.标签选择器
匹配所有p元素
p{color:red;}
3.ID选择器
匹配ID="div1"的元素
#div1{color:red;}
4.类选择器
匹配class="red"的元素，CSS和HTML对大小写不敏感，但ID是大小写敏感的。
.red{color:red;}
应用多个class，类名中间用空格隔开，class="red green"。元素将应用red和green的所有规则，重复规则只有一个生效，但不取决于class中类名顺序，而是CSS定义的顺序。
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 .red{ 7 background:red; 8 height:50px; 9 } 10 .green{ 11 background:green; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="red">div1</div> 17 <div class="green red">div2</div> 18 <div class="red green">div3</div> 19 </body> 20 </html>
效果：
若将样式改为：
1 <style type="text/css"> 2 .green{ 3 background:green; 4 } 5 .red{ 6 background:red; 7 height:50px; 8 } 9 </style>
效果为：
多类选择器，匹配class同时有多个特定类名的元素，优先级高于单类选择器，同样类名顺序无影响。
1 <style type="text/css"> 2 .red{ 3 background:red; 4 height:50px; 5 } 6 .green{ 7 background:green; 8 } 9 .green.red{ 10 background:blue; 11 } 12 </style>
效果：
5.属性选择器
匹配有某属性的元素
[attr]{color:red;}
匹配有某属性且属性值等于特定值的元素
[title="div1"]{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 [title]{ 7 background:red; 8 } 9 [title="div1"]{ 10 background:blue; 11 } 12 </style> 13 </head> 14 <body> 15 <div title="div1">div1</div> 16 <div title="div2">div2</div> 17 </body> 18 </html>
效果：
其他属性选择器：
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
6.后代选择器与子元素选择器
后代选择器
div span{color:red;}
子元素选择器
div>span{color:red;}
使用以上选择器组合，后代选择器匹配特定父元素内的所有子孙元素，而子元素选择器匹配特定父元素内的一代子元素（不包括孙辈）。
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div span{ 7 background:red; 8 } 9 div > span{ 10 background:blue; 11 } 12 div,p{ 13 border:1px solid black; 14 padding:5px; 15 } 16 17 </style> 18 </head> 19 <body> 20 <div> 21 <span>div的子元素span1</span> 22 </div> 23 <br/> 24 <div> 25 <span>div的子元素span2</span> 26 <p> 27 <span>p的子元素、div的孙元素span3</span> 28 </p> 29 </div> 30 </body> 31 </html>
效果：
7.相邻兄弟选择器
匹配相邻下一个兄弟元素
div+span{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div+span{ 7 background:red; 8 } 9 div,p,span{ 10 border:1px solid black; 11 margin:5px; 12 padding:5px; 13 line-height:40px; 14 } 15 </style> 16 </head> 17 <body> 18 <div>div1</div> 19 <span>div1的邻居span1</span> 20 21 <div>div2</div> 22 <p>div2的邻居p<span>p的子元素span2</span></p> 23 <span>p的邻居span3</span> 24 </body> 25 </html>
效果：
8.逗号选择器
匹配多个选择器组合的结果
h1,span{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 h1,span{ 7 background:red; 8 } 9 </style> 10 </head> 11 <body> 12 <h1>h1</h1> 13 <span>span</span> 14 </body> 15 </html>
效果：
9.伪类选择器
锚伪类，专门针对锚元素a的各个状态
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
定义时，hover必须在link和visited之后，active必须在hover之后。
:first-child伪类选择第一个元素
:last-child伪类选择最后一个元素
:nth-child(n)伪来选择第n个元素
:nth-last-child(n)伪类选择倒数第n个元素
:first-line伪类选择文本首行
:first-letter伪类选择文本首字
:before伪类在元素内容前插入新内容
:after伪类在元素内容后插入新内容
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div:after{ 7 content:‘|after|‘ 8 } 9 div:before{ 10 content:‘|before|‘ 11 } 12 </style> 13 </head> 14 <body> 15 <div>div</div> 16 <span>span</span> 17 </body> 18 </html>
效果：
还有几个不太常用的CSS3伪类选择器没有例举，有时间补齐。
这种选择法与JQuery中的选择器非常非常类似，可见JQuery之基础选择器。
原文：http://www.cnblogs.com/feitan/p/5197596.html