列表项的字体颜色没有从 CSS 正确继承答案

【问题标题】：Font color of list item doesn't inherit correctly from CSS列表项的字体颜色没有从 CSS 正确继承
【发布时间】：2012-10-17 15:52:09
【问题描述】：

我有以下标题菜单：

%div.header
  %div.span-25
    = link_to logo, root_path
  %div.span-25
    %div.headermenu
      %ul
        - if current_page?(root_path)
          %li.currentmenu
            = link_to "Home", root_path
        - else
          %li
            = link_to "Home", root_path
        - if current_page?(user_path)
          %li.currentmenu
            = link_to "User", user_path
        - else
          %li
            = link_to "User", user_path

在我的样式中：

.headermenu {
  border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  margin-top:-5px;
  position:relative;
  display:block;
  height:42px;
  font-size:11px;
  font-weight:bold;
  background:transparent url('darkgray_background.gif') repeat-x top;
  font-family:Arial,Verdana,Helvitica,sans-serif;
  text-transform:uppercase;
}

.headermenu ul {
  margin:0px;
  padding:0;
  list-style-type:none;
  width:auto;
}

.headermenu ul li {
  display:block;
  float:left;
  margin:0 1px 0 0;
}

.headermenu ul li a {
  display:block;
  float:left;
  color:#000;
  text-decoration:none;
  padding:13px 12px 0 12px;
  height:28px;
}

.currentmenu {
  color:#fff;
  border-radius:5px;
  -moz-border-radius:5px;
  background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

因此，当前的标题菜单将突出显示。突出显示的菜单的背景图像是正确的（'darkgray_backgroundOVER.gif'），但字体是黑色的（#000），而不是应有的#fff。 Firebug 显示当前菜单中的取消字体：

继承自 li.currentmenu element.style { ~~颜色：#FFFFFF;~~}

上面显示的是：

.headermenu ul li a { 颜色：#000000； ETC.... }

为什么不显示白色字体？黑色几乎看不清。我该怎么做才能使当前菜单的字体为白色，而将其他（不是当前菜单）的字体保持为黑色？

【问题讨论】：

标签： html css haml

【解决方案1】：

您需要在锚标记本身上指定颜色，而不仅仅是菜单类。您的 CSS 不够具体，因此 #000 被覆盖。

li.currentmenu a{ 
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

将更具体，并应正确定位锚标记。

【讨论】：

.headermenu ul li a { color: #000000;显示：块；向左飘浮;高度：28px；填充：13px 12px 0；文字装饰：无； } custom.css?body=1 (line 268) li.currentmenu a { -moz-border-radius: 5px 5px 5px 5px;背景： url("darkgray_backgroundOVER.gif") 无重复滚动中心顶部透明； ~~颜色：#FFFFFF;~~ }
最后一行（颜色：#FFFFFF）被取消
将 !important 添加到他的代码中，它应该可以工作，我应该从我的特定选择器开始。我现在编辑它。在这两个答案之间它应该可以工作。
我们在同一时间回答了瑞克。
另外，添加 !important 是不好的做法，不需要。

【解决方案2】：

这可能是一个特异性问题，只需这样做：

li.currentmenu a{
color:#fff !important;
border-radius:5px;
-moz-border-radius:5px;
background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

【讨论】：

【解决方案3】：

那是因为.currentmenu 选择器不如.headermenu ul li a 具体。

只需将.currentmenu 选择器更改为.headermenu .currentmenu a

.headermenu .currentmenu a {
  color:#fff;
  border-radius:5px;
  -moz-border-radius:5px;
  background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}

【讨论】：