Question

我一直在寻找一个好时光，但似乎没有人遇到同样的问题。

我正在尝试将链接的文本颜色更改为灰色，但它显示为蓝色。我特别希望通过设置链接的类属性来实现这一点 - 我不希望在aspx文件中使用自定义css，而我不想要设置链接的样式属性。（为了记录，我已尝试过这两种方式并且它们有效）。

//Site.css
 .grey {
 color: grey;
 }

  .button-link2 {
 padding: 10px 15px;
 background: #EFEFEF;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 -transition-duration: 0.2s;
 text-decoration: none;
 cursor: pointer;
}

以及我希望它的工作方式：

<a id="btnCancel" href="CMS-contentlist.aspx" class="grey button-link2">Cancel</a>

提前致谢！

Answer 1

您需要将文本颜色应用于链接之外的元素或添加属性。

a.grey,
.grey {
  ...
}

Answer 2

将此视为重要。仅在必要时使用

//Site.css
 .grey {
 color: grey !important;
 }

Answer 3

只是想确认你有下面的部分：

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Answer 4

这是拼写错误吗？尝试“灰色”而不是“灰色”

Answer 5

问题是，您可能在同一Site.css中覆盖您的其他链接设置。默认情况下，为超链接定义了此类样式属性。摆脱这些，或使用它：

#btnCancel.grey {
 color: grey;
 }

Answer 6

使用Chrome开发者工具等DOM检查工具可以很容易地解决这类问题。在Chrome中，右键单击元素并选择“Inspect element”，然后在弹出的窗口中，您将能够看到可能覆盖.grey类颜色声明的所有可能声明。

确保你真的了解CSS specificity rules。

do not use !important，如果可以避免的话。

Answer 7

.grey
{
color:gray;
}

这样可行。

通过外部css文件更改链接的文本颜色时出现问题

7 个答案: