匹配所有元素
*{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 2 3 4 5 14 15 16 div1
17 div2
18 div3
19 20
效果：
若将样式改为：
1
效果为：
多类选择器，匹配class同时有多个特定类名的元素，优先级高于单类选择器，同样类名顺序无影响。
1
效果：
5.属性选择器
匹配有某属性的元素
[attr]{color:red;}
匹配有某属性且属性值等于特定值的元素
[title=div1]{color:red;}
1 2 3 4 5 13 14 15 div1
16 div2
17 18
效果：
其他属性选择器：
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
6.后代选择器与子元素选择器
后代选择器
div span{color:red;}
子元素选择器
div>span{color:red;}
使用以上选择器组合，后代选择器匹配特定父元素内的所有子孙元素，而子元素选择器匹配特定父元素内的一代子元素（不包括孙辈）。
1 2 3 4 5 18 19 20 21 div的子元素span122
23
24 25 div的子元素span226 27 p的子元素、div的孙元素span328
29
30 31
效果：
7.相邻兄弟选择器
匹配相邻下一个兄弟元素
div+span{color:red;}
1 2 3 4 5 16 17 18 div1
19 div1的邻居span120 21 div2
22 div2的邻居pp的子元素span2
23 p的邻居span324 25
效果：
8.逗号选择器
匹配多个选择器组合的结果
h1,span{color:red;}
1 2 3 4 5 10 11 12 h113 span14 15
效果：
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 2 3 4 5 13 14 15 div
16 span17 18
效果：
还有几个不太常用的css3伪类选择器没有例举，有时间补齐。
这种选择法与jquery中的选择器非常非常类似，可见jquery之基础选择器。