前端开发中常用的CSS选择器解析(二）
摘自：http://www.58img.com/web/704
继前端开发中常用的CSS选择器解析(一）中的总结，我们将继续为大家总结前端开发中常用的CSS选择器和浏览器兼容，掌握了基础才能更好的运用CSS这个前端中都简单也最常用的语言。
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子
h1:after {content:url(/i/logo.gif);}上面的代码实现了在h1标题的后面显示一张图片。我们也经常用它来实现清除浮动，写法如下
.clearfix:after {content:"";display: block;clear: both;visibility: hidden;font-size:0;height:0;}.clearfix {*display: inline-block;_height:1%;}19. X:hover
div:hover {background:#e3e3e3;}:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。需要注意的是，在ie 6中，:hover只能用于链接元素。
这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：
a:hover {border-bottom:1px solid black;}兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container){color: blue;}否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式：
p::first-letter {float: left;font-size:2em;font-weight: bold;font-family: cursive;padding-right:2px;}下面的代码中设定了段落中第一行的样式：
p::first-line {font-weight: bold;font-size:1.2em;}兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera（IE6竟然支持，有些意外啊。）
22. X:nth-child(n)
li:nth-child(3){color: red;}这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
tr:nth-child(2n){background-color: gray;}兼容浏览器：IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2){color: red;}与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3){border:1px solid black;}与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3){border:1px solid black;}与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：
ul:nth-last-of-type(3){border:1px solid black;}兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul >li:last-child {border-bottom: none;}与:first-child类似，它匹配的是序列中的最后一个元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {color: red;}这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
<div><p> My paragraph here. </p></div><div><p> Two paragraphs total. </p><p> Two paragraphs total. </p></div>在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {font-weight: bold;}这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：
<div><p> My paragraph here. </p><ul><li> List Item 1 </li><li> List Item 2 </li></ul><ul><li> List Item 3 </li><li> List Item 4 </li></ul></div>在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢：
方案一：
ul:first-of-type >li:nth-child(2){font-weight: bold;}方案二：
p + ul li:last-child {font-weight: bold;}方案三：
ul:first-of-type li:nth-last-child(1){font-weight: bold;}兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
总结：
如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。
另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度。
个人观点：前端开发者都应该推荐客户使用新的浏览器，让客户获得更好的浏览体验！（让更多的前端人员不再苦逼~~~）
