今天在工作中遇到一个问题，需要选择某个具体的元素给它加某个效果，这个元素是动态生成的。
虽然有很多方法解决，我最后选择了css选择器。之前用的最多的就是选择第一个和最后一个，查了css文档之后，发现还有很多好用的选择器。在往上查了资料之后，发现下面这些选择器很有用，以下是整理：
1. :fist-child选择某个元素的第一个子元素；
2. :last-child选择某个元素的最后一个子元素；
3. :nth-child()选择某个元素的一个或多个特定的子元素；
eg:
(1) :nth-child(3), 选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：
.demo li:nth-child(3){background:lime;}
注：这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法
(2) :nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li"
注：这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的
(3) :nth-child(2n),这种方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字。
(4) :nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择.
(5) :nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义.
(6) :nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的.
(7) :nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了.
注：IE6-8和FF3-浏览器不支持":nth-child"选择器
4. :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
注：“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。
5. :nth-of-type()选择指定的元素；
:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：
.demo p:nth-of-type(even){background-color:lime;}
其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器
6. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
7. :first-of-type选择一个上级元素下的第一个同类子元素；
8. :last-of-type选择一个上级元素的最后一个同类子元素；
9. :only-child选择的元素是它的父元素的唯一一个了元素；
10. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11. :empty选择的元素里面没有任何内容。
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，要这个p不显示，就可这样来写：
p:empty{display:none;}
伪元素
1. ::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
p::first-line{font-weight:bold;}
2. ::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉:
p::first-letter{font-size:56px;float:left;margin-right:3px;}
3. ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
4. ::selection用来改变浏览网页选中文的默认效果