关闭 Angular Material Accordion 的背景阴影？

Question

In this demo I managed to turn off the background shadow on the Angular Material Accordion using this rule:

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: none !important;
  /* box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); */
}

I have never seen this type of rule ( [class*=...] ) before.

Can someone explain what this does?

Answer 1

It's an attribute wildcard selector. it looks for any child element under.mat-expansion-panel that has a class that [class*='mat-elevation-z'] element.

Here are some links that help you more to understand about wildcard selector

1. http://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
2. https://www.w3schools.com/css/css_attribute_selectors.asp#:~:text=CSS%20%5Battribute*%3D%22value%22,to%20be%20a%20whole%20word !

Thanks!