一、元素选择符序号 选择器 含义
1. * 通用元素选择器，匹配任何元素
2. e 标签选择器，匹配所有使用e标签的元素
3. .info class选择器，匹配所有class属性中包含info的元素
4. #footer id选择器，匹配所有id属性等于footer的元素
1. ** { margin: 0; padding: 0;}
在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。
#container * { border: 1px solid black;}
它会选中`#container`下的所有元素。
2. ea { color: red; }ul { margin-left: 0; }
如果你想定位页面上所有的某标签，不是通过`id`或者是’class’，直接使用标签选择器。
3. .info.error { color: red;}
这是个`class`选择器。它跟`id`选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。
4. #footer#container { width: 960px; margin: auto;}
在选择器中使用`#`可以用id来定位某个元素。
二、多元素的组合选择器序号 选择器 含义
5. e,f 多元素选择器，同时匹配所有e元素或f元素，e和f之间用逗号分隔
6. e f 后代元素选择器，匹所有属于e元素后代的f元素，e和f之间用空格分隔
7. e > f 子元素选择器，匹配所有e元素的子元素f
8. e + f 相邻元素选择器，匹配所有紧随e元素之后的同级元素f
9. e~f 匹配任何在e元素之后的同级f元素
5. e,fa,li { color: red; }
匹配所有的a元素和li元素
6. e fli a { text-decoration: none;}
只匹配li后面多有的a元素（包括孙子辈）
7. e > fdiv#container > ul { border: 1px solid black;}
只匹配li后面多有的a元素（不包括孙子辈）`e f`和`e > f`的差别就是后面这个指挥选择它的直接子元素。看下面的例子：
1 div id=container> 2 ul> 3 li> list itemli> 4 ul> 5 li> child li> 6 ul> 7 li> list item li> 8 li> list item li> 9 li> list item li>10 ul>11 div>
`#container > ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。
8. e + ful + p { color: red;}
这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段，并将它们的颜色都设置为红色。
9. e~ful ~ p { color: red;}
`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。
三、关系选择器序号 选择器 含义
10. e[att] 匹配所有具有att属性的e元素，不考虑它的值。（注意：e在此处可以省略，比如[cheacked]。以下同。）
11. e[att=val] 匹配所有att属性等于val的e元素
12. e[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于val的e元素
13. e[att|=val] 匹配所有att属性且属性值为以val开头并用连接符-分隔的字符串的e元素。
14. e[att^=val] 匹配所有att属性以val开头的元素
15. e[att$=val] 匹配所有att属性以val结尾的元素
16. e[att*=val] 匹配所有att属性包含val字符串的元素
10. e[att]匹配所有具有att属性的e元素，不考虑它的值。
1 style> 2 a[class]{color:#f00;} 3 style> 4 head> 5 body> 6 ul> 7 li>a href=? class=external>外部链接a>li> 8 li>a href=?>内部链接a>li> 9 li>a href=? class=external>外部链接a>li>10 li>a href=?>内部链接a>li>11 ul>12 body>
上面的这个例子中，只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。
11. e[att=val]匹配所有att属性等于val的e元素
a[class=external]{color:#f00;}
上面这片代码将会把`class`属性值为`external`的标签设置为红色，而其他标签则不受影响。
12. e[att~=val]匹配所有att属性具有多个空格分隔的值、其中一个值等于val的e元素
style>a[class~=external]{color:#f00;}style>head>body>ul> li>a href=? class=external txt>外部链接a>li> li>a href=? class=txt>内部链接a>li> li>a href=? class=external txt>外部链接a>li> li>a href=? class=txt>内部链接a>li>ul>body>
这个`~`符号可以定位那些某属性值是空格分隔多值的标签（因此只有外部链接是红色字体）。
13. e[att|=val]选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的e元素。
1 style> 2 li[class|=test3]{color:#f00;} 3 style> 4 head> 5 body> 6 ul> 7 li class=test1-abc>列表项目1li> 8 li class=test2-abc>列表项目2li> 9 li class=test3-abc>列表项目3li>10 li class=test4-abc>列表项目4li>11 li class=test5-abc>列表项目5li>12 li class=test6-abc>列表项目6li>13 ul>14 body>
因此只有项目3为红色。
14. e[att^=val]选择具有att属性且属性值为以val开头的字符串的e元素。 1 body> 2 ul> 3 li class=abc>列表项目1li> 4 li class=acb>列表项目2li> 5 li class=bac>列表项目3li> 6 li class=bca>列表项目4li> 7 li class=cab>列表项目5li> 8 li class=cba>列表项目6li> 9 ul>10 body>
li[class^=a]{color:#f00;}
选择具有class属性且属性值为以a开头的字符串的e元素(因此只有项目1、2为红色)。
15. e[att$=val]匹配所有att属性以val结尾的元素
li[class$=a]{color:#f00;}
选择具有class属性且属性值为以a结尾的字符串的e元素(项目4、6为红色)。
16. e[att*=val]匹配所有att属性包含val字符串的元素
li[class*=a]{color:#f00;}
因为class的属性中都含有字母a所以结果均为红色。
 四、伪类选择器17. e:link 匹配所有未被点击的链接
18. e:visited 匹配所有已被点击的链接
19. e:hover 匹配鼠标悬停其上的e元素
20. e:active 匹配鼠标已经其上按下、还没有释放的e元素
21. e:first-child 匹配父元素的第一个子元素e
22. e:last-child 匹配父元素的最后一个子元素e
23. e:only-child 匹配父元素仅有的一个子元素e
24. e:nth-child(n) 匹配父元素的第n个子元素e
25. e:nth-last-child(n) 匹配父元素的倒数第n个子元素e
26. e:first-of-type 匹配同类型中的第一个同级兄弟元素e
27. e:last-of-type 匹配同类型中的最后一个同级兄弟元素e
28. e:only-of-type 匹配同类型中的唯一的一个同级兄弟元素e
29. e:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素e
30. e:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素e
17. e:link设置超链接a在未被访问前的样式。
1 ul>2 li>a href=? class=external>外部链接a>li>3 li>a href=?>内部链接a>li>4 li>a href=? class=external>外部链接a>li>5 li>a href=?>内部链接a>li>6 ul>
a:link{color:#03c;}.external:link{color:#f00;}
运行结果：外部链接为红色；内部链接为蓝色
18. e:visited设置超链接a在其链接地址已被访问过时的样式。
19. e:hover设置元素在其鼠标悬停时的样式。
20. e:active设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
21. e:first-child匹配父元素的第一个子元素e。
1 body>2 ul>3 li>test1li>4 li>test2li>5 li>test3li>6 li>test4li>7 li>test5li>8 ul>9 body>
li:first-child{color:#f00;}
结果只有列表第一条信息test1为红色
22. e:last-child匹配父元素的最后一个子元素e。
li:last-child{color:#f00;}
结果只有列表最后一条信息test5为红色
23. e:only-child匹配父元素仅有的一个子元素e。
1 ul>2 li>test1li>3 ul>4 ul>5 li>test2li>6 li>test3li>7 li>test4li>8 ul>
li:only-child{color:#f00;}
结果只有列表test1为红色
24. e:nth-child(n)匹配父元素的第n个子元素e。
li:nth-child(3){color:#f00;}
结果只有列表test3为红色
25. e:nth-last-child(n)匹配父元素的倒数第n个子元素e。
li:nth-last-child(3){color:#f00;}
结果只有列表test3为红色
26. e:first-of-type匹配同类型中的第一个同级兄弟元素e。
1 div class=test>2 div>b>我是一个div元素b>div>3 p>这是段落1p>4 p>这是段落2p>5 p>这是段落3p>6 p>这是段落4p>7 p>这是段落5p>8 div>
p:first-of-type{color:#f00;}
结果只有这是段落1为红色。
27. e:last-of-type匹配同类型中的最后一个同级兄弟元素e。
p:last-of-type{color:#f00;}
结果只有这是段落5为红色。
28. e:only-of-type匹配同类型中的唯一的一个同级兄弟元素e。 
b:only-of-type{color:f00;}
结果只有我是一个div元素为红色。
29. e:nth-of-type(n)匹配同类型中的第n个同级兄弟元素e,n 可以代表数字也可以代表字母。 
p:nth-of-type(2){color:#f00;}
结果只有这是段落2为红色。
n为odd时表示奇数；n为even表示偶数；
p:nth-of-type(odd){color:#f00;}
结果：段落1、3、5显示为红色。
p:nth-of-type(even){color:#f00;}
结果：段落2、4显示为红色。
30. e:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素e，n 可以代表数字也可以代表字母。。 
p:nth-last-of-type(2){color:#f00;}
结果：段落4显示为红色。
n为odd时表示奇数；n为even表示偶数；
p:nth-last-of-type(odd){color:#f00;}
结果：段落1、3、5显示为红色。
p:nth-last-of-type(even){color:#f00;}
结果：段落2、4显示为红色。