CSS：如何忽略按钮类的默认超链接颜色答案

【问题标题】：CSS: How to ignore default hyperlink colors for button classCSS：如何忽略按钮类的默认超链接颜色
【发布时间】：2017-06-12 07:21:27
【问题描述】：

这看起来很简单，但我相信我想得太多了，以至于无法让它发挥作用。

我有我的默认超链接样式：

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>

【问题讨论】：

另一种解决方案是使用多个选择器，也就是所有同样是按钮的<a> 元素可以使用a.button{//code}、a.button:hover{//code} 和a.button:visited{//code} 设置不同的样式

标签： html css

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

一种解决方案是使用 :not 选择器

a {
  text-decoration: none;
  color: blue;
}
a:not(.button):hover {
  color: red;
}
a:not(.button):visited {
  color: purple;
}

【讨论】：

我真的很喜欢这个回复。避免为其他类的每个状态添加额外的 CSS 规则，但它的支持相当有限。 caniuse.com/#search=not()
@hopkins-matt 错误链接，用于“选择器列表参数”。 :not()有很好的支持caniuse.com/#feat=css-sel3
@hopkins-matt 是的，:not 得到了很好的支持，事件 IE9 支持它，在我看来相当不错:)
@MichaelCoker 哎呀，我的错！浏览速度太快。

【解决方案3】：

这是!important 的完美用例。无需摆弄额外的标记/规则/选择器。

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

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

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

<a href="#">This link has no class.</a> <br> <br>
<a href="#" class="button">This link has class "button".</a> <br><br>
<a href="#" class="button color-green">This link has classes "button" and "color-green".</a>

【讨论】：

我相信 OP 还希望在 .button 类上持久化 color。 “我希望任何带有类按钮的链接都是颜色：#535353；在它的默认状态下，悬停和访问。”
感谢您的指出，我已经编辑了我的答案。一个简单的修复，我刚刚将相同的 !important 添加到 .button。

【解决方案4】：

尝试使用锚标记指定颜色类：a.color-green

见下面的代码

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,
a.color-green {
  color: green;
}
.color-yellow,
a.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>

【讨论】：

【解决方案5】：

需要指出的一点是，这些链接的样式实际上是有顺序的。见here。 “你的悬停必须在被访问者之后”。

至于按钮颜色，另外需要指出的是，使用.color-green 不是引用您在链接中列出的类，您将button color-green 写为不同的类。

您可以设置每个类的链接样式。例如a.button:hover，因此在您的情况下，您将设置很多不同的设置，但您目前拥有的所有链接默认为红色。

【讨论】：