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 中有效。
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虽然现在很穷
结果图像(对于那些没有标志的)
关于CSS4 :matches() for parent and not children element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51875033/