Question

我有一个链接，我想要更改文本的颜色，使其远离我为超链接设置的颜色。我的代码是：

<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>

我的CSS是：

a:link { 
  color:rgb(50%, 15%, 5%);
  text-decoration:none; 
} 


.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

由于某种原因，超链接文本仍为棕色，rgb（50％，15％，5％）。

Answer 1

你可以制作一个CSS样式.button a：link {color：black;}

Answer 2

更改你的css以使用带有.button的父css类的.button类和锚点。如下图所示：

.button,.button a:link {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

编辑：请记住，这会导致边框重复，并且由于text-decoration：none而使超链接显示而没有下划线。在这种情况下，最佳做法是单独使用css声明。

.button {....}
.button a:link {.....}

Answer 3

我认为这是因为它的特殊性; span（。按钮）对链接的特定性低于a:link，因此a:link样式正在应用（根据规范正确： {{3} }）。

如果要覆盖此一个按钮的a:link样式（或者......以其他方式以相同的方式），请将类添加到<a>标记而不是其父元素。

虽然你可能会逃脱：

.button > a:link {/* styles */}

哪一个应该具体，因为这个<a>是类.button范围的后代。

编辑：

值得指出的是，“>”选择器仅适用于直接后代，因此类a元素中的.button会受到影响，但是a在class .button的元素内反过来的div内部不会受到影响。

IE也不支持这个选择器（当然低于版本7，我不知道版本7或者版本8）。也许可以使用“*”运算符：

.button * a:link {/* styles */}

请记住，虽然这是支持的 - 我认为 - 至少在版本5.x之后的IE中，它有点宽泛，因为它将针对类{{1}的元素内的所有a }，无论任何临时元素如何，并且仍然可能不如应用于.button的任何规则那么具体。

Answer 4

“! important”不是强迫孩子的风格。用户可以覆盖网页作者分配的样式。在你的情况下没用。

正确的方法是：

.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

.button a {
  color:black;
}

说明：

“.button > a”是一个好主意，但在IE6中不起作用。因此，在这里使用“.button a”是安全的。
将“.button”和“.button a”放在一组样式中会使按钮边框重复。

覆盖样式表

4 个答案:

编辑：