CSS3选择器

浏览数：47 / 时间：2015年06月09日

其实在很早以前就很想花时间去系统地看下CSS3的一些东西，可能是因为项目上也没真正“刚需”，加上自己也比较懒(我还是很诚实的)。一直到最近公司开始做移动端项目，才想起可以开始用CSS3了。是不是有种养肥了再杀的感觉，但是不管怎样还是希望借这次机会开头，能持续把CSS3学习下去。

从各处找文字资料，加上以前囤积的一些视频。看了一下CSS3新增加的一些选择器，瞬间有种高大上的感觉啊。相比之前一直实用ID和class来做元素选择器，现在一下多了很多选择。以前很多需要通过jQuery才能使用的选择器，现在CSS3就能直接使用了。虽然IE对新增加的一些选择器兼容地不是特别好，但是如果是做移动端的话，基本可以无视IE浏览器。就我觉得可能会用得上或者比较容易混淆的选择器做了一下整理归类。

1 E:nth-child(n)  //表示E父元素中的第n个字节点

和一般的编程语言不同的是这个n是从1开始计数的，也就是说要选中第一个子元素，应该使用 E:nth-child(1)

在使用jquery的时候我们常常用到的一个效果就是给表格做“隔行变色”，但是jQuery的选择器仅仅能选中表格的奇偶行。CSS3选择器提供了更多元素的奇偶行的选择。

1 p:nth-child(odd){background:red}/*匹配奇数行*/
2 p:nth-child(even){background:red}/*匹配偶数行*/

除了固定的奇偶行的选择之外，还能有更多地算术式选择器：

1 p:nth-child(3n){background:red}

上面的代码能将所有索引是3的倍数的段落添加样式，这样能提供很多想象空间了。

CSS3还能提供从后往前计算的选择器选择元素：

1 E:nth-last-child(n) //表示E父元素中的第n个字节点，从后向前计算

以上几个选择器都能选取当前元素父元素的子元素，但是是在所有子元素中选取的。CSS3还能实现更精细化的选取：

1 E:nth-of-type(n)  //表示E父元素中的第n个字节点，且类型为E

同时也提供从后往前计算的选择器：

1 E:nth-last-of-type(n)  //表示E父元素中的第n个字节点，且类型为E,从后向前计算

除了以上通过计算索引的选择方式之外，CSS3还能提供一些直接用单词选择元素的选择器：

1 :first-child  //表示E元素中的第一个子节点
2 E:last-child  //表示E元素中的最后一个子节点
3 E:first-of-type  //表示E父元素中的第一个子节点且节点类型是E的
4 E:last-of-type  //表示E父元素中的最后一个子节点且节点类型是E的
5 E:only-child  //表示E元素中只有一个子节点。注意：子节点不包含文本节点
6 E:only-of-type  //表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

以上这些选择器对IE的支持需要IE9及以上版本。

还有几个比较实用的表单选择器

1 E:disabled  //表示不可点击的表单控件
2 E:enabled  //表示可点击的表单控件
3 E:checked //表示已选中的checkbox或radio

使用上面三个选择器，我们就能为三种不同状态的表单控件进行样式指定，而不需要借助ID或class。

最后还有一个特别高大上的选择器，那就是E::selection，我们知道每个浏览器会为文本选中的时候加上一个很丑的的蓝色背景，对于经常做清(zhuang)新(bi)风格的网站设计我来说一直觉得不能接受。现在有了这个选择器之后就解决了这个问题。使用方法如下：

1 ::selection{color:#f00; background:#eee;}

这样就能为选中文本添加自己喜欢的样式了，不过为了兼容老版本的火狐、谷歌和opera，我们需要加上浏览器前缀

1 ::selection{color:#f00; background:#eee;}
2 ::-moz-selection{color:#f00; background:#eee;}
3 ::-o-selection{color:#f00; background:#eee;}
4 ::-webkit-selection{color:#f00; background:#eee;}