CSS4：matches（）用于父元素而不是子元素

Question

CSS4中的新选择器:matches()允许我们编写

:matches(section, article, aside) h1 {
    color: red;
}

/* instead of */

section h1, article h1, aside h1 {
    color: red;
}

但是，有什么方法可以写比这短的东西

section h1, section p, section span {
    color: red;
}

/* with something like */

section:matches(h1, p, span) {
    color: red;
}

其中h1，p和span不能被视为*

Answer 1

此

section h1, section p, section span {
    color: red;
}

实际上是：

section :matches(h1, p, span) { /* note the space */
    color: red;
}

当前在Chrome浏览器中有效。如果启用了“实验性Web平台功能”标志。

section :matches(h1, p, span) {
  color: red;
}

<section>
  <h1>Red H1</h1>
  <p>Red Paragraph</p>
  <span>Red Span</span>
  <h2>Not red H2</h2>
</section>

Support虽然目前很差

结果图片（适用于不带标志的图片）