初识CSS3选择器

注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

现在谈起CSS3的相关内容，其实CSS3已经不算是一个新东西了，毕竟出来有一段时间了。不过我却没有什么系统的经验，上次被人问到是否了解CSS3新增的选择器，各种尴尬，因为我压根就不知道哪些是CSS3新增的选择器，即使可能我之前有使用过。

为了补上这块知识的缺陷，恶补了一下CSS选择器的相关内容，并实验了每种选择器的效果。本文参考资源主要来自W3C文档

首先我们来看一张图，

图中展示目前CSS Level1~Level3支持的所有的选择器。这张图是从W3C上抄下来的，绝对权威。

本篇文章将会说一说CSS Level3新增的选择器（如上图中飘黄的加重部分）。并附带一些浏览器兼容性说明。

属性选择器

新增的属性选择器如下图所示，

这几个其实比较容易理解，使用起来应该没有什么障碍，这里就不多解释了。

其浏览器兼容性如下图，

结论：除了IE6，基本上可以放心的使用了。

结构伪类选择器

新增的结构伪类选择器如下图所示，

说实话，新增的这几个结构伪类选择器很容易弄混淆，特别是*-child(n)跟*-of-type(n)。

这里，我们就以nth-child(n)与nth-of-type(n)为例，通过一个demo来说明一下他们之间的区别。

通过demo，我们可以看出，

• nth-child(n)表示，选择满足以下条件的元素：第一是一个p元素；第二是父元素的第n个子元素
• nth-of-type(n)表示，选择父元素的第n个子元素p

如果还没弄明白，这里有一篇文章可供参考。

其浏览器兼容性如下图，

UI元素状态伪类选择器

新增的UI元素状态伪类选择器如下图所示，

其浏览器兼容性如下图，

目标伪类选择器

新增的目标伪类选择器如下图所示，

这个新增的选择器有点不太好理解，它是啥意思呢？例如页面上有个id=test的div，然后在URI中有#test的话，就会给id为test的div加上定义的样式。

其浏览器兼容性如下，

否定伪类选择器

新增的否定伪类选择器如下图所示，

个人觉得这个选择器可能会使用的比较频繁，它的作用是在匹配的一些列元素剔除选择符为s的元素。相当于做了个筛选。

其浏览器兼容性如下，

通用兄弟元素选择器

新增的通用兄弟元素选择器如下图所示，

这个选择器也应该蛮有用的，稍微注意一下与E + F这种通用兄弟选择器的区别就好了。

其浏览器兼容性如下，