Question

我有两种不同类型的类名。第一个名为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;
}

这很好，但是如果存在这样的超链接：

<a href="#" class="hover-color-green">Link</a>

在这种情况下，超链接应该保留默认的超链接颜色，并且只应覆盖悬停颜色，但是由于规则class*='color-'以及我只指定了悬停颜色的事实，超链接没有给出正常颜色（＃3498db）。

有没有办法更新此规则，只有在类名以color-开头时才会触发？（因此，ANYTHING-color-不适用）

Answer 1

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

相反，您需要^=，它将开头的任何属性与该字符串匹配。

组合效果最好：

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

见MDN page on CSS attribute selectors和 this other SO answer

Answer 2

以另一种方式思考它。不要更改类名中不包含颜色的内容。首先将所有a更改为您想要的内容：

a {
    color: yellow;
}

a:hover {
    color: orange;
}

然后你可以用：

覆盖它们

a.color-red{...}
a.color-blue{...}
a.color-green{...}
a.hover-color-red{...}
a.hover-color-blue{...}
a.hover-color-green{...}

现在您可以像以下一样使用它：

<a ... class="color-red hover-color-blue">test</a>

不要让它变得复杂。它可以完美地工作，并且在将来你可以更容易地保持你的风格。

如果你想在任何地方使用它，只需选择它：

.color-red{...}
.color-blue{...}
.color-green{...}
.hover-color-red{...}
.hover-color-blue{...}
.hover-color-green{...}

请参阅此处的示例：

a {
  color: gray;
}
a:hover {
  color: orange;
}
.color-red, .color-red-hover:hover {
  color: red;
}    
.color-blue, .color-blue-hover:hover {
   color: blue;
}

<a class="color-red color-blue-hover" href="#">Red</a>
<a class="color-blue color-red-hover" href="#">Blue</a>
<a href="#">Normal</a>

CSS：类名选择器名称以。开头

2 个答案: