:matches() (:any()) 方便好用的伪类函数选择器

:matches() CSS 伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

注意，许多浏览器通过一个更旧的、带前缀的伪类:any()来支持这个功能，包括旧版本的Chrome、Firefox和Safari。这与:matches()的工作方式完全相同，只是它需要厂商前缀，不支持复杂的选择器。

/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
:matches(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

/* 以上内容相当于以下内容 */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

/* 向后兼容的版本:-*-any() */
:-moz-any(header, main, footer) p:hover,
:-webkit-any(header, main, footer) p:hover,
:matches(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

来个例子：

<header>
  <p>一段标题信息</p>
</header>

<main>
  <ul>
    <li><p>一段列表</p><p>列表项</p></li>
    <li><p>一段列表</p><p>列表项</p></li>
  </ul>
</main>

<footer>
<p>一段底部信息</p>
</footer>

:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

选择器列表简化

:matches() 伪类可以大大简化CSS选择器。例如，下面的CSS:

/* 多层无须列表 */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
  list-style-type: square;
}

可以被替换为：

:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
  list-style-type: square;
}

但是，不要像下面那么做: (参见 the section on performance 。)

:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
  list-style-type: square;
}

简化部分选择器

:matches 伪类在处理HTML5 sections and headings特别有用。由于 <section>, <article>, <aside>, <nav> 经常嵌套在一起, 没有 :matches()的话匹配其他元素将会很棘手。例如, 在没有 :matches()的情况下, 在不同深度对所有素进行样式化可能非常复杂:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}
/* Level 3 */
/* ... */

使用 :matches()之后,它变的非常简单:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:matches(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:matches(section, article, aside, nav)
:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 15px;
}

这个函数暂时还不被完全支持，相信不久的将来一定会被完美支持