如何用CSS同时匹配静态类.main与属性选择器定位的动态类？

直接把属性选择器跟在类选择器后面即可，不需要额外分隔符，以下是两种可行写法：

基础兼容写法（支持所有现代浏览器） #

.main[class^="main-"], .main[class*=" main-"] {
  /* 此处编写你的样式 */
}

• .main[class^="main-"]：匹配同时拥有main类，且class属性以main-开头的元素
• .main[class*=" main-"]：处理动态类不是第一个类的场景（比如<div class="main other-class main-300">），匹配class属性中包含空格+main-的元素

简洁写法（需CSS选择器4支持） #

如果目标浏览器支持CSS选择器4标准，可用更简洁的:has伪类：

.main:has([class^="main-"]) {
  /* 此处编写你的样式 */
}

原写法无效的原因 #

你之前写的.main.div[class^="main-"]逻辑错误——这个选择器是寻找同时拥有main和div类的元素，而非拥有main类且class属性包含main-前缀的div元素，完全偏离了需求。

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