想看看其他创造性的用法：访问我滴创建阴影的窍门
通过Css3选择器的标准说明书，你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容，浏览器会接受一个双引号。
兼容性
•IE8+
•Firefox
•Chrome
•Safari
•Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
我去，这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑，不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式？这个属性就是做这个的。
记住啦，较old版本的IE，只能在锚点标签后使用这个hover。
这个选择器你用得最多的情况，估计可能就是在锚点的悬停时加个border-bottom啦。
a:hover {
border-bottom: 1px solid black;
}
小贴士： border-bottom:1px solid black;比 text-decoration:underline;好看一点哦。（真的？我去）
兼容性
•IE6+ (In IE6, :hover must be applied to an anchor element)
•Firefox
•Chrome
•Safari
•Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
not伪类灰常有用。例如我要选择所有的div，除了有id为container的。上面那个代码片段就能完美的实现。
如果我想选择除了p以外的所有元素，我可以这么做：
*:not(p) {
color: green;
}
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
我们可以使用伪元素（以::为表示）来定义元素的样式。例如第一行，第一个字符，记住啦，这种方法只能应用于同级元素才有效。
伪元素由两个冒号组成：::
指定p的第一个字符的样式
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
这段代码会找到所有段落，然后再从中定义这些段落的第一个字符。
这常常使用在仿报纸的文章首字母样式。
指定p的首行样式
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
同样，这个::first-line伪元素会像我们期望的那样，只定义段落的第一行的样式。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。
请注意 nth-child接收整数和变量，不过不是从0开始的，如果你想选定第二个li，使用 li:nth-child(2).
