CSS-具有用于多个标签的类的选择器

Question

有什么方法可以简化这段代码吗？我想将颜色更改为类"的子标签；容器套筒"；

<style>
.container-quill p {
color: black !important;
}

.container-quill h1 {
color: black !important;
}

</style>

<div id="editor" class="container-quill">
<p></p>
<h1><h1/>
</div>

Answer 1

使用:is(...selectors):

.container-quill :is(p, h1) { 
color: black !important; 
}

这是的现代版本

.container-quill p,
.container-quill h1 { 
color: black !important; 
}

根据您的特殊性需求，您也可以考虑:where(...selectors)，它不会为所使用的完整选择器的特殊性添加任何内容，但在您的情况下，这没有多大意义，因为您无论如何都在应用规则，通过声明!important：

.container-quill :where(p, h1) { 
color: black !important; 
}

浏览器支持：

• ：is((
• ：where((