html - CSS:如何忽略按钮类的默认超链接颜色

Question

这看起来很简单，但我认为我想太多了，我无法让它发挥作用。

我有默认的超链接样式:

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: purple;
}

我还有一些按钮样式:

.button {
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}

最后，我将一些全局类添加到元素中以自定义字体颜色:

.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

所以我的问题是处理作为超链接的按钮，例如:

<a class="button" href="#">A button</a>

我希望任何带有 button 类的链接都为 color: #535353; 在其默认状态下，悬停并访问。按钮应该始终是那种颜色...除非...

除非按钮有颜色类，例如:

<a class="button color-green" href="#">A green button</a>

如果一个按钮有一个颜色类，颜色应该更改为指定的任何颜色类...这包括所有状态(默认、悬停、已访问)。

我遇到的问题只是超链接按钮的 :hover 和 :visited 状态。例如，如果按钮具有颜色类，则悬停时颜色始终变为红色。

我如何更新它，以便如果一个按钮有一个颜色类，它在所有状态下都是该颜色？

请记住，颜色类用于各种元素(div、span、p 等)，按钮类也用于链接、提交按钮、div 等。

另请注意，我的超链接具有 color-yellow 类，但我仍希望超链接继承默认的超链接悬停颜色。我只想要任何类 button 忽略默认的超链接悬停和访问的颜色。

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: purple;
}
.button {
  width: auto;
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}
.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

<a href="#">Normal hyperlink</a>
<a class="color-yellow" href="#">Yellow normal, red hovered</a>
<a class="button" href="#">Default button</a>
<a class="button color-green" href="#">Green color button</a>

Answer 1

您可以将 :not() 与类属性通配符选择器结合使用，以从 CSS 规则中排除 .color-*。

a {
  text-decoration: none;
  color: blue;
}
a:not([class*="color-"]):visited {
  color: purple;
}

a:not([class*="color-"]):hover {
  color: red;
}
.button {
  width: auto;
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}
.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

<a href="#">Normal hyperlink</a>
<a class="button" href="#">Default button</a>
<a class="button color-green" href="#">Green color button</a>