Angular Material手风琴去除背景阴影的CSS规则含义咨询

你写的[class*='mat-elevation-z']是CSS里的属性包含选择器，具体拆解来看：

• [class]：定位所有带有class属性的元素
• *=：是「包含匹配」的操作符，只要元素的class属性值里包含指定字符串，不管这个字符串在开头、中间还是结尾，都会被选中
• mat-elevation-z：Angular Material的阴影层级类都是以这个字符串开头的，比如mat-elevation-z1、mat-elevation-z8、mat-elevation-z24，所以这个选择器能一次性命中所有带阴影层级的面板元素。

再看你整行的选择器.mat-expansion-panel:not([class*='mat-elevation-z'])，其中:not()是CSS的否定伪类，意思是排除掉符合括号里条件的元素。所以整个选择器的作用就是：选中所有带有.mat-expansion-panel类，但没有任何mat-elevation-z系列阴影类的手风琴面板，然后通过box-shadow: none !important去掉它们的阴影。

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