偶然发现我的常用的类属性选择器没有生效，百思不得其姐，于是百度寻找答案。无果。

经测试发现问题原因。

在使用css模块化时，会有一些公共样式是不在模块化下的。此时使用类属性选择器时,类名在css模块下是可以正常使用的。单独使用公共类名也是可以正常使用。但是当css模块化和公共类同时使用时，属性选择器选择的是公共类名时，有可能不生效。

有点绕，上实例

[class^='aspect-ration']{
  border: 1px solid red;
}

// 模块化css
import styles from 'index.css';
import 'global.css';

/** aspect-ration 是 index.css 下的属性； 有效*/
<div className={`${styles['aspect-ration']}`}></div>

/** aspect-ration 是 global.css下的属性； 有效*/
<div className={`aspect-ration`}></div>


/** aspect-ration 是 global.css下的属性； 无效*/
<div className={`${styles['index-content']} aspect-ration`}></div>

/** aspect-ration 是 global.css下的属性； 有效*/
<div className={`aspect-ration ${styles['index-content']}`}></div>

/** aspect-ration 是 index.css下的属性； 有效*/
<div className={`${styles['aspect-ration']} global-content`}></div>

总结：虽然概率不高，但是碰到了确实很难受。希望对你有帮助，受累点个赞