css :is()、:matches(), any()

css伪类选择其：:is(）

:is(）是matches、 any的替代

:is()用法如下：

/* 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;
}

优化：

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

最好不要写成如下代码，原因请看【性能部分】

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

 matches、 any用法：

<ul class="contenParent">
  <li class="title">I am Gopal</li>
  <li class="content">我是伪类选择器</li>
</ul>

.contenParent:matches(.title, .content){
  color: #eee;
}
.contenParent :-webkit-any(.title, .content){  //Chrome
  color: #eee;
}
.contenParent :-moz-any(.title, .content){  //Firefox
  color: #eee;
}

性能部分 

当前（从 Firefox 12 开始）实现:-moz-any()属于通用规则类别，这意味着将其用作最右侧的选择器比使用 ID、类或标签作为最右侧的选择器要慢。

如：

.a > :-moz-any(.b, .c)
比下面慢：

.a > .b, .a > .c

以下是最快的

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

避免css选择器失效：

比如：

.contenParent  :is(.title, :content) {  /*此时，.title会正常生效*/
  color: #eee;
}

.contenParent .title, .contenParent :content) { /* 此处样式钧无效 */ }

优先级

/* A  计算的时候，取 .list，而不是 ul。 */
:is(ol, .list, ul) li {   /* A 生效 B不生效 */
  color: #885c5c;
}
/* B  */
ul li { 
  color: #000;
}

浏览器兼容性

 参考资料：

:is() (:matches(), :any()) - CSS（层叠样式表） | MDN