覆盖样式表

时间:2009-05-24 02:03:45

标签: html css

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

<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%)。

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:3)

更改你的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 {.....}

答案 2 :(得分: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的任何规则那么具体。

答案 3 :(得分:0)

! 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;
}

说明:

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