CSS选择器4是下一代CSS选择器规范，上一个版本在起草多年后于2011年提出。
那么，这一版本的新东西有哪些呢？
选择器配置文件
CSS选择器分为两类：快速选择器和完整选择器。快速选择器适用于动态CSS引擎。完整选择器适用于速度不占关键因素的情况，例如document.querySelector。
选择器上下文不同，发挥的作用不同。一些功能强大的选择器很遗憾太慢了，不能切实地适应高性能环境。要做到这一点，需要在选择器规范里定义两个配置文件[参见]。
:HAS
:has选择器是第四代选择器中最有趣的部分，但它有个重要的警告，下面会描述。它能让你改变选择器的选择对象，即实际将被赋予样式的特定元素，同时它还会继续和后文中出现的元素进行匹配。它开辟了许多匹配上下文的新方法。例如，匹配一个header：
|
1 2 |
// 有一个头元素的任何部分 section:has(h1, h2, h3, h4, h5, h6) |
或者开发人员可以匹配只包含一定数量图片的段落：
|
1 2 3 4 |
// 侧边栏和五个子类 div.sidebar :has(*:nth-child(5)) // 拥有第5个子类 :not(:has(*:nth-child(6))) // 但不具有第6个子类 |
甚至可以匹配包含特定子类数量的元素（本例有5个）：
|
1 2 3 |
// 匹配一个全是图像的段落 :has(img) // 拥有一个图像 :not(:has(:not(img))) //所有内容均是图像 |
警告：此时:has选择器并没有想象中的快速，这表明它不能在样式表中使用。由于目前还没有人实现这个选择器，它的性能特征还尚待研究。如果浏览器跟得上的话，它很快就能用于一般样式了。
早期版本的规范会在主题旁添加一个感叹号（！）表示警告，不过现在没有了。
:MATCHES
:matches是:moz-andy和:webkit-any的标准化选择器，已经与浏览器前缀共存了一段时间。它允许样式表的创建人员删除重复的规则路径。
它的用处是，对一个类似笛卡尔积（Cartesian-product-esque）的SCSS/SASS输出进行整理，比如下面这段：
|
1 2 3 4 5 6 7 8 9 10 |
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) { .... } |
可以输出为下面这种更便于维护的样式：
|
1 2 3 4 5 6 7 |
body > .layout > .body > .content :matches(.post, .page) :matches(p, li) :matches(a.image.standard:first-child:nth-last-child(4), a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), .... } |
上述Mozilla的参考页列出了有关性能的一些注意事项。既然这个选择器致力于成为标准，我们希望能看到更多有关性能方面的工作，使之更轻便。
:NTH-CHILD(AN+B [OF S])
虽然:nth-of-typey自世纪之交就已经存在，但第四代选择器在此基础上增添了一个过滤功能：
|
1 |
div :nth-child(2 of .widget) |
选择器S用于确定索引，它独立于伪类左边的选择器。如规范中提到的，如果你提前知道了元素的的类型，就可以将:nth-of-type选择器转化为:nth-child(… of S)，如：
|
1 |
img:nth-of-type(2) => :nth-child(2 of img) |
这个选择器和:nth-of-type的区别是微妙但重要的。对于:nth-of-type，无论是否给一个元素添加了选择器，它都会对有相同标记的内容加入隐式索引。每当你使用一个新的选择器，:nth-child(n of S)就会使计数器加1.
这个选择器有潜在的缺陷。因为：nth-child 伪类中的选择器是独立于其左边的选择器的，如果你在左边制定一个非:nth-child中的父级选择器的话，你可能会意外地漏掉一些东西。例如：
\u7ed3\u679c
\n
\u4ee3\u7801\u89e3\u91ca
\n- \n
- tracking.ObjectTracker()\u63a5\u53d7\u6570\u7ec4\u53c2\u6570\u5c06\u4f60\u60f3\u8981\u6807\u8bb0\u7684\u5bf9\u8c61\u5206\u7c7b\uff08\u6bd4\u5982\u8138\u90e8\u6574\u4f53\u3001\u773c\u775b\u3001\u9f3b\u5b50\u3001\u5634\u5df4\u7b49\uff09\u3002 \n
- setStepSize()\u89c4\u5b9a\u7528\u6765\u6807\u8bb0\u7684\u65b9\u6846\u7684\u6b65\u957f\u3002 \n
- \u6211\u4eec\u628a\u8981\u6807\u8bb0\u7684\u5bf9\u8c61\u548c
track\u4e8b\u4ef6\u8fdb\u884c\u7ed1\u5b9a\uff0c\u4e00\u65e6\u6211\u4eec\u8981\u6807\u8bb0\u7684\u5bf9\u8c61\u5b8c\u6210\u521d\u59cb\u5316\uff0c\u5c31\u4f1a\u89e6\u53d1track\u4e8b\u4ef6\u3002 \n - \u6570\u636e\uff08Data\uff09\u4fdd\u5b58\u5728\u5bf9\u8c61\u6570\u7ec4\u5217\u8868\u4e2d\uff0c\u5176\u4e2d\u7684\u503c\u662f\u6bcf\u4e00\u4e2a\u6807\u8bb0\u5bf9\u8c61\u7684
\u957f\u3001\u5bbd\u4ee5\u53cax\u3001y\u5750\u6807\u3002 \n
\u7ed3\u8bba
\n\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c\u7ed3\u679c\u53ef\u80fd\u56e0\u4e3a\u4eba\u8138\u5f62\u72b6\u4e0d\u540c\u800c\u6709\u6240\u53d8\u5316\u3002\u867d\u7136\u8fd8\u9700\u8981\u6539\u8fdb\uff0c\u4f46\u662f\u6211\u4eec\u5f88\u611f\u8c22\u5bf9\u505a\u51fa\u8fd9\u4e9b\u5de5\u4f5c\u548cAPI\u63a5\u53e3\u7684\u6240\u4ed8\u51fa\u7684\u52aa\u529b\u3002
\n