如何为多个不同类元素选择共同子元素？CSS选择器优化问询

当然可以，用CSS的:is()选择器就能简化这个写法，不用重复写每个父类选择器：

:is(.item--purple, .item--grey, .item--black) h2 {
    color: rgb(241, 241, 241);
}

这个写法和你原来的冗长代码效果完全一致，:is()会匹配括号内任意一个选择器对应的元素，然后选中它们的子元素h2。

需要注意的是，:is()是现代CSS特性，目前Chrome 88+、Firefox 78+、Safari 14+以及Edge 88+都已经支持。如果你的项目需要兼容更老旧的浏览器（比如IE），那还是得用你原来的写法，或者考虑用CSS预处理器（比如Sass）的嵌套语法来简化编写过程，但预处理器最终编译出来的CSS还是和你原来的代码一样。

内容的提问来源于stack exchange，提问作者ElliottMcDonald