简而言之：
E:has(rs1, rs2)匹配 E 时不同的元素F匹配任何选择器参数与 E 相关。如果你了解 jQuery:has()选择器 http://api.jquery.com/has-selector，这完全是同一件事。
-
E:matches(s1, s2) matches E when E itself matches any of the selector arguments. Think of :matches() as the direct opposite of :not(), which matches E if E itself does not match any of the arguments.1 You can also think of :matches() as a pseudo-class version of jQuery's .filter() method http://api.jquery.com/filter.
这种表示法相当于将每个选择器参数与 E 连接起来（前提是您实际上可以连接它们），这样您就有一个选择器列表(E)(s1), (E)(s2)。例如，div:matches(.foo, .bar)相当于div.foo, div.bar.
这种根本区别通过选择器得到了最直接的体现div:matches(p) and div:has(p):
div:has(p)匹配任何div元素那个has a p后裔。
这非常类似于div p，除了前者的目标是div后者的目标是p.
Since a div永远不能be a p, div:matches(p)永远不会匹配
任何事物。 （同样地，div:not(p)将匹配所有div元素。）
这是一个更复杂的示例，其中的选择器稍微不那么荒谬：
div:has(.foo, .bar)
div:matches(.foo, .bar)
使用以下标记：
<div class="foo"></div> <!-- [1] -->
<div class="bar"></div> <!-- [1] -->
<div class="foo bar"> <!-- [2] -->
<p></p>
</div>
<div> <!-- [3] -->
<p class="foo"></p>
</div>
<div> <!-- [3] -->
<div> <!-- [3] -->
<p class="bar"></p>
</div>
</div>
<div> <!-- [4] -->
<div class="foo"> <!-- [5] -->
<p class="bar"></p>
</div>
</div>
哪些元素由哪些选择器匹配？
匹配者div:matches(.foo, .bar)
首先div元素具有“foo”类，第二个div元素具有“bar”类，因此每个元素都满足其各自的选择器参数:matches()伪类。
-
匹配者div:matches(.foo, .bar)
第三div元素有both类，因此它匹配两个选择器参数。
关于特异性的注释：这两个参数都具有相同的特异性，使得总特异性(0, 1, 1)，但是当一个元素与具有不同特异性值的多个选择器参数匹配时，规范表示特异性是匹配的最具体参数的特异性 http://dev.w3.org/csswg/selectors-4/#specificity.
匹配者div:has(.foo, .bar)
这些中的每一个div元素has后代元素（在本例中为p）与一个与其各自的选择器参数相匹配的类:has()伪类。
-
匹配者div:has(.foo, .bar)
This div元素有一个div.foo后代和一个p.bar后代，因此它满足两个相对选择器参数。
关于特殊性的注释：因为:has()尚未在快速配置文件 http://dev.w3.org/csswg/selectors-4/#profiles因此暂时被排除在 CSS 之外，特异性的概念根本不适用。有计划在 CSS 中使用的快速配置文件中包含此功能的有限版本，但目前还没有具体的消息。任何新的进展将在适当的时候添加。
-
匹配者div:matches(.foo, .bar) and div:has(.foo, .bar)
This div元素匹配两个伪类：
- it is
.foo（因为它有“foo”类），并且
- it has“bar”阶级的后代。
该元素也将匹配div:matches(.foo, .bar):has(.foo, .bar)，这将是一个有效的 4 级选择器，因为复合选择器可以具有伪类的任意组合。
之间的另一个区别:matches() and :has()就是它:has()接受所谓的相对选择器 http://dev.w3.org/csswg/selectors-4/#relative-selector。相对选择器有一个scope;选择器范围本身就是一个完整的主题，但出于以下目的:has()，范围元素始终是您附加的元素:has()伪类到.但是，更重要的是，相对选择器可以具有隐式后代组合器，或者显式地以组合器开始，例如>, + or ~— 该组合器将相对选择器的其余部分链接到其作用域元素。
例如，虽然:has()默认为祖先-后代关系，您可以传递以以下开头的相对选择器+然后就变成了邻接兄弟关系：ul:has(+ p)匹配任何ul直接跟在后面的元素p（并且不一定是contains a p后裔）。
As for :matches()，虽然概述表说它接受复合选择器列表，但据我所知，它还没有确定是否会接受复合选择器列表或复杂选择器，以及在哪个配置文件中（快速或完整）。但复合选择器只是 Selectors 3 目前所称的新名称简单选择器序列 http://www.w3.org/TR/css3-selectors/#sequence复合选择器是一整系列的复合选择器和组合器。从这方面来说，相对选择器更像是一个复杂的选择器。看这个答案 https://stackoverflow.com/questions/9848556/correct-terms-and-words-for-sections-and-parts-of-selectors/9849403#9849403选择器中使用的各种术语的非详尽列表。
1 Yes, that's "arguments" in plural — in Selectors 4, :not() can now accept a list of selectors http://dev.w3.org/csswg/selectors-4/#negation as opposed to a single simple selector. A much-needed enhancement, but it's also to make it consistent with the other new functional pseudo-classes.
