:any

这是一项实验技术

由于该技术的规范尚未稳定，请查看各浏览器的兼容性表格来查看用法。另外还需注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

:any()伪类可以创建一个包含多个选项的选择器，满足其中的任何一个选项的对象都将被匹配。对于相似对象的选择，它不用反复多次的构建多个选择器，因此是一个很好的选择。

/* Select any h2 inside a section, article, aside, or nav */
/* Currently supported with -moz- and -webkit- prefixes */
:-moz-any(section, article, aside, nav) h2 {
  font-size: 4.5rem;
}

:-webkit-any(section, article, aside, nav) h2 {
  font-size: 4.5rem;
}

注意：这个伪类正在CSS Selectors Level 4中以:matches()的名字进行标准化。它的语法和名称很可能会在不久的将来发生变化。

语法

形式语法

:-moz-any( <selector># )
:-webkit-any( <selector># )

值

selector选择器。这可能是一个简单的选择器或由CSS 3简单的选择器组成的多重选择器，也可能包括后代的组合器。

注意：选择器可能不包含伪元素，并且允许的唯一组合器是后代组合器。

实例

例如，以下CSS：

/* 3 deep (or more) unordered lists use a square */
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;
}

可以用以下文字取代：

/* 3 deep (or more) unordered lists use a square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
  list-style-type: square;
}

但是，请不要使用以下内容:(请参阅下面的性能部分。）

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

笔记

在处理HTML5 部分和标题时，此属性特别有用。因为<section>，<article>，<aside>，和<nav>可以嵌套，而没有:any()，要给这些元素设置彼此匹配的样式是比较棘手的。

例如，如果没有:any()，给所有处于不同深度的<h1>元素设置风格可能会非常复杂：

/* 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 */
/* ... don't even think about it*/

但是:-any()，会使该项工作容易得多：

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

性能和特性问题

错误561154跟踪了Gecko的特殊性:-moz-any()不正确的问题。目前（从Firefox 12开始）的实现将:-moz-any()放入了通用规则中，这意味着使用它作为最右边的选择器比使用ID，类或标签作为最右边的选择器要慢。

例如：

.a > :-moz-any(.b, .c)

慢于：

.a > .b, .a > .c

以下更快：

:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2)-moz	12.0 (534.30)-webkit	?	?	5 -webkit

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)-webkit	?	?	?	5 -webkit

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18