在Angular 9(Ivy)中,CSS类^属性选择器不再在Angular材料组件上工作。这是由于Ivy编译器对组件和模板进行更改,包括处理CSS选择器。为了解决这个问题,你可以使用更特定的选择器。
例如,如果你想将CSS样式应用于具有class属性以"example"开头的button元素,你可以这样写:
button[class^="example"] {
color: red;
}
这将仅对class属性以“example”开头的按钮元素应用样式。
如果你想要更具体的选择器,你可以使用[class*="example"]。这个选择器将对所有包含“example”的class属性应用样式,而不仅仅是以“example”开头的。
示例:
button[class^="example"] {
/* Will only apply to the button above */
color: red;
}
button[class*="example"] {
/* Will apply to any button with a class that contains "example" */
background-color: yellow;
}