CSS:类名选择器名称以.开头

我有两种不同类型的类名.第一个被命名color-*.例如:

color-red
color-blue
color-green

我也有班级名字 hover-color-*

hover-color-red
hover-color-blue
hover-color-green

我试图为默认的超链接颜色制作一个css规则:

a:not([class*='color-']) {
    color: #3498db;
}

这很好,但是如果存在这样的超链接:

Link

在这种情况下,超链接应该保留默认的超链接颜色,并且只应覆盖悬停颜色,但是由于规则class*='color-'和事实我只指定了悬停颜色,超链接没有给出正常颜色(#3498db).

有没有办法更新这个规则,以便它只在类名开头时触发color-？(所以,ANYTHING-color-不适用)

您使用的选择器*=匹配包含该字符串的任何属性.

相反,您需要^=,它匹配以该字符串开头的任何属性.

组合效果最好:

a[class^='color-'], a[class*=' color-'] { ... }

请参阅CSS属性选择器上的MDN页面以及 此其他SO答案.