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

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-将不适用）

- MultiDev

---

你需要学习CSS的特异性和顺序 - 这样你就可以在顶部仅使用a {}来设置默认颜色，然后用你的特定类覆盖它们 - 这样你就不需要烦恼所有这些非和属性包含了。 - Pete

@Pete 那么我的颜色规则就不再像 .color-red, .hover-color-red:hover { 这样，也必须包括超链接：.color-red, .hover-color-red:hover, a.color-red, a.hover-color-red:hover {... 这会导致 CSS 文件中的内容更多。 - MultiDev

你需要提供一个最小的可工作代码示例，以显示问题所在。你似乎把事情搞得过于复杂了。 - seemly

请再次阅读我的先前评论 - .color-red 优先于 a，因此您不需要 a.color-red - 学习基础知识将有助于您在以后的开发中更好地理解和应用，当您尝试完成类似于您正在尝试做的复杂任务时，这些基础知识会派上用场。通常情况下，我发现重要的是思考您想要实现的目标的方式，总会有一种简单的方法来重新排列事物。 - Pete

Answer 1

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

相反，你需要使用 ^=，它匹配以该字符串开头的任何属性。

最好使用组合：

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

参见 MDN CSS 属性选择器页面 和 另一个 SO 答案。

- Brian Stephens

---

匹配的是以color-开头的class属性，而不是一个class。因此它不适用于class="another-class color-green"。 - Quentin

但是颜色类必须是每个元素命名的第一个类...非常难以控制。 - MultiDev

@Quentin：是的，那是一个限制。我看到了这个问题。 - Brian Stephens

@Quentin：我已经更新了我的答案以处理这个限制。 - Brian Stephens

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>

- ICE

---

那么我的颜色规则不再像.color-red, .hover-color-red:hover {那样简单，还必须包括超链接：.color-red, .hover-color-red:hover, a.color-red, a.hover-color-red:hover {...这会导致CSS文件中有更多的内容。颜色规则可以应用于<p>,<span>,<div>等元素。 - MultiDev

@JROB 你不需要那样做。你可以只使用.color-red, .hover-color-red:hover {。看看我刚刚制作的这个例子：http://codepen.io/anon/pen/MJvgrJ - ICE