在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
1. 通用选择器
*选择器是选择页面上的全部元素，例如：
* {
margin:0; padding:0;
}
上面的代码作用是把全部元素的margin和padding设为0，是最基本的清除浏览器默认样式的方法。
*选择器也可以用于某一个子选择器中，例如：
#container * {
border:1px solid #fcfcfc;
}
上面的代码就是将id为container的元素下的所有子元素都设置一个border。
除非必要，我不建议在页面中过多的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。
2. id选择器
id是最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，高于类选择器的10），它的缺点就是没办法去复用它，所以在使用id选择器前要谨慎。
#container {
960px;
height：1050px；
}
3. 类选择器
class选择器是使用最多的选择器之一。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。
.container {
960px;
height：1050px；
}
4. 后代选择器
这也是我们最常用的一种选择器——后代选择器，更加具体的去定位元素，中间用空号隔开。
li a {
text-decoration: none;
}
选择 <li> 元素内部的所有 <a> 元素。
5. 标签选择器
使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。
a { color: red; }
ul { margin-left: 100px; }
6. 伪类选择器
①当选择器为a标签，以下四种伪类选择器代表的意思如下：
link:连接平常的状态。
visited:连接被访问过之后。
hover:鼠标放到连接上的时候。
active:连接被按下的时候。
a:link {
color:black;
}
a:visited {
color:blue;
}
a:hover {
color:red;
}
a:active {
color:white;
}
②X:before和X:after这两个伪类与content结合用于在元素的前面或者后面追加内容：
h1:after {
content:url(/images/logo.png)
}
参数给h1标题后面显示一张图片。
除此之外它也可以用来清除浮动：
.clearfix:after {
content: “”;
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
7. 子选择器
element1>element2，选择父元素为element1元素的所有element2 元素。
<head>
<style type="text/css">
#container>ul {
padding:10px 0;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
</body>
#container > ul只会选中id为’container’的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。使用子节点组合选择器会在性能上有许多的优势。
8. X:nth-child(n)
这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。
ul li:nth-child(3) {
color: red;
}
在上面例子中，设定第三个列表元素li的字体颜色为红色。
该伪类元素可以实现隔行变色：
ul li:nth-child(2n) {
background-color: yellow;
}
9. X:nth-last-child(n)
与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。
ul li:nth-last-child(2) {
color: red;
}
上面例子中设定倒数第二个列表元素的字体颜色。
10. X:first-child
用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框。
ul li:first-child {
border-top: 1px solid #fff;
}
11. CSS选择器中逗号、空格分隔和连写的区别
连写：就是需要同时具备才会出现效果
逗号分隔：就是只需要具备其中之一即可出现效果，二者是并列关系
空格分隔：就是二者是父子关系，是当前的元素子元素才会出现效果
12. 项目燃尽图
