CSS4:匹配父元素而非子元素的（）

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

不能视为

*

本

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

实际上是：

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

如果启用了“实验性Web平台功能”标志，则该功能目前在Chrome中可用。

部分：匹配项（h1、p、span）{
颜色：红色；
}

红色H1
红色段落

红跨度
不是红色H2

您可能正在寻找这个：请注意，

：匹配的浏览器支持是有限的，
：has
@temaniaf的情况也一样如果我不想在父级上应用样式，只需编写
第h1节，第p节，第span节
simpler@SuperDJ它是关于CSS4的，所以它仍在构建中，我确信OP知道
节h1
意味着h1是节的一个（不一定是直接的）子节点。（如果您有它，它是一个直接的孩子
section>h1
）。节：匹配（h1）要求“节”为“h1”，这是不可能的，因为两者都是标记，而不是.class或#id。您正在查找它的子项。因此，
section*：matches（…）
更接近您的示例。（注意通配符星号）嗯！我不明白你在这里。。。我在Windows上有最新版本的Chrome（版本68.0.3440.106），我在这里看到的是黑色，而不是红色。在版本69.0.3497.32（官方版本）beta（64位）中对我有效，但我有实验功能enabledyes，正如我们所看到的，你在“beta”版本中，caniuse.com声明它在：“默认情况下不受支持，但可以启用”不…Chrome设置中有一个标志，您可以在稳定版本的Chrome中设置该标志。无论如何，语法是正确的-我已经添加了结果的图像。