Question

我有一个css声明：

.textBox{
  color: Orange;
  font-size: 17px;
  background: rgba(100, 200, 200, 0.7);
  }

.textBox a:link, .textBox a:visited{
  color: Blue;
  border: 1px solid Black;
  text-decoration: none;
  background: none;
  }

.textBox a:hover, .textBox a:active, .textBox a:focus {
  background: rgba(0,0,0,0.5);
  color: Red;
  }

然后我将类“textBox”应用于div。最强的“颜色”属性，类中的属性（“橙色”）可以工作。文字有橙色。但我无法改变链接的颜色。既不是“正常”，也不是我将鼠标悬停在它们上面。链接的其他属性（边框，背景等）在“正常”状态和悬停时都可以正常工作。

我在OSX 10.6.8上。 Chrome 33.0.1750.58测试版不会以蓝色显示链接颜色（文本），并且在悬停时不会将链接颜色更改为红色。它确实改变了悬停时的背景，并确实显示了链接周围的边框。

FF26工作正常。悬停时变为红色的蓝色链接。

知道发生了什么事吗？

谢谢！

更新：对不起，我错了。它也没有在FF26中正常工作。那里我有点太仓促了。我把它留给了简化问题，但css还包含：

.textBox h1{
  margin-bottom: 7px;
  color: Black;
  }

在Chrome中，h1中的链接会显示为主文本中的链接（某种灰色，我没有在任何级别设置为颜色）。在FF26中，h1标记内的链接将显示为蓝色，并在悬停时变为红色，而主文本中的链接将显示为与Chrome中相同的灰色。 h1标记工作正常（黑色和正确的边距）。

至于html：

<div style="" class="textBox">
  <h1><a href="bar.php">This Document </a>Contains Descriptions</h1>
  <p>Check also <a href="foo.php">sample books</a> foo bar.</p>
</div>

Answer 1

尝试仅使用.textBox a代替.textBox a:link

Answer 2

我有类似的问题，但只有一个样式表。除链接外，一切都收到了预期的风格。无论出于何种原因，我通过修复样式表名称中的大写字母来解决我的问题..一个字母是S而不是文件名中的s。我发现这很奇怪，因为所有其他元素都在接收他们的风格......

Answer 3

如果没有看到你的HTML就很难说，但我怀疑以下的CSS会起作用：

.textBox{
  color: Orange;
  font-size: 17px;
  background: rgba(100, 200, 200, 0.7);
  }

.textBox:link, .textBox:visited{
  color: Blue;
  border: 1px solid Black;
  text-decoration: none;
  background: none;
  }

.textBox:hover, .textBox:active, .textBox:focus {
  background: rgba(0,0,0,0.5);
  color: Red;
  }

就像我说的那样，如果没有看到你的HTML就很难说，但是你的第一个样式规则就好像textBox类正在应用于链接本身，而后续规则只适用于{{1 class（我希望这有道理）？

如果您将textBox类应用于上述代码应该有效的标记，我所做的就是删除css中的a标记。

EXAMPLE

Answer 4

这是一件简单的事情：头部有两个电话：

<link href="css/bar.css" rel="stylesheet" type="text/css" media="all"></link>
<link href="css/foo.css" rel="stylesheet" type="text/css" media="all"></link>

他们的顺序错了。所以我的.textBox a：颜色后来被一般的身体a：color。

覆盖了

发现我正在创造一个小提琴分享。谢谢你的建议！

很抱歉发布了这个问题，但经过几个小时的盯着屏幕后，我觉得自己很生气，需要别人的眼睛才能看一眼。感谢您的所有建议！

更新：伙计，这变得令人尴尬。无论如何，更改订单的解决方案在我的家庭MAMP安装上工作，并且它适用于我使用的“真正的”在线服务器上的FF26（Apache，不确定细节）。使用Chrome访问在线页面时，我遇到了与之前相同的问题。为了解决这个问题，我不得不删除这些行：

.mmBack a, .mmBack a:visited{
  color: rgb(75,75,75);
  }

来自bar.css的

不知何故，上面的声明覆盖了.textBox。 html是：

<body onload="onLoadBody()" class="mmBack">
  /* the textBox divs in here, as stated in the question */
</body>

如果有人遇到同样的事情......

CSS不会改变Chrome中的链接颜色

4 个答案: