如何简化含a/b/c子类的.main-class元素的CSS选择器写法？

先纠正你两个笔误：CSS里的maring-top应该是margin-top，5xp是5px，先修正这些拼写错误避免样式无效。

你之前用:has()无效是因为用错了伪类——:has()是用来匹配包含指定后代元素的父元素，而你的a/b/c是和main-class同属当前<div>的类，不是它的子元素，所以完全不适用。

最简洁的实现方式是用:is()伪类（原标准名:matches()，现在统一为:is()），它可以把多个选择器合并成一组，写法非常简洁：

/* 基础样式 */
.main-class {
  margin-top: 1px;
}

/* 匹配同时拥有main-class和a/b/c任意一个类的元素 */
.main-class:is(.a, .b, .c) {
  margin-top: 5px;
}

这个写法等价于你之前的.main-class.a, .main-class.b, .main-class.c，但代码量少很多，可读性也更强。

兼容性说明 #

:is()已经被所有现代浏览器（Chrome、Firefox、Safari、Edge）支持，如果你不需要兼容IE这类老旧浏览器，直接用这个方案就好。如果必须兼容旧环境，那只能退回到逗号分隔的选择器，但这也是旧环境下的唯一简洁写法了。

另外还有一种属性选择器的写法，但并不比:is()简洁，仅作参考：

.main-class[class~="a"],
.main-class[class~="b"],
.main-class[class~="c"] {
  margin-top: 5px;
}

这种写法是通过匹配class属性中包含独立的a/b/c值来选中元素，但本质和逗号分隔的选择器没区别，还是优先推荐:is()。

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