Question

我搜索过一个类似的问题，但要么是我看不到的一个明显的错误，要么我只是在描述我的搜索时不好。

所以，我有一个创建一个基本网站的任务，但我决定更进一步，只是创建我想要的商业网站然后提交，但是，我遇到了一个我似乎无法解决的问题找个方法。由于我的网页背景有点暗，我想提亮默认的链接颜色，因此它们仍然可以识别为链接但很容易辨认。虽然我的菜单使用了CSS按钮，但它也会更改按钮上的文本颜色，即使它的文本在按钮代码中明确设置为白色。

如果您想查看我正在谈论的任何内容，我的网站目前正在托管here.这是一个链接颜色更明亮的版本。

至于我的按钮代码，它看起来像这样：

.homebutton {
font-size:15px;
font-family:Georgia;
font-weight:normal;
color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #b33329;
padding:10px 30px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(21%, #cc372d), color-stop(84%, #8a2b23) );
background:-moz-linear-gradient( center top, #cc372d 21%, #8a2b23 84% );
background:-ms-linear-gradient( top, #cc372d 21%, #8a2b23 84% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc372d', endColorstr='#8a2b23');
background-color:#cc372d;
display:inline-block;
text-shadow:1px 1px 0px #810e05;
-webkit-box-shadow:inset 1px 1px 0px 0px #f5978e;
-moz-box-shadow:inset 1px 1px 0px 0px #f5978e;
box-shadow:inset 1px 1px 0px 0px #f5978e;
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

.homebutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(21%, #8a2b23), color-stop(84%, #cc372d) );
background:-moz-linear-gradient( center top, #8a2b23 21%, #cc372d 84% );
background:-ms-linear-gradient( top, #8a2b23 21%, #cc372d 84% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a2b23', endColorstr='#cc372d');
background-color:#8a2b23;
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

.homebutton:active {
position:relative;
top:1px;
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

这是网页上使用的“主页”按钮的确切CSS代码。

非常感谢所提供的任何帮助或见解，并感谢您花时间看我的请求，至少哈哈。

-sky

Answer 1

您需要为按钮内的链接定义规则，将其添加到您的css

a.homebutton{
    color: #FFF;    
}

检查这个小提琴以查看示例： http://jsfiddle.net/victorrseloy/mHLea/

Answer 2

元素名称选择器比类名更强，因此“a”元素的规则将覆盖“.homebutton”规则。

您可以轻松解决此问题，您需要在规则选择器中添加“a”元素，因此请将“.homebutton”替换为css中的“a.homebutton”。

如何在更改默认链接颜色时将CSS按钮上的链接颜色保持为一种颜色？

2 个答案: