1

次のヘッダーメニューがあります。

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

そのため、現在のヘッダー メニューが強調表示されます。強調表示されたメニューの背景画像 ('darkray_backgroundOVER.gif') は正しいですが、フォントは黒 (#000) であり、本来の #fff ではありません。Firebug は、現在のメニューからキャンセルされたフォントを示しています。

継承元 li.currentmenu element.style { color: #FFFFFF; }

代わりに、これは次のとおりです。

.headermenu ul li a { color: #000000; など....}

フォントが白く表示されないのはなぜですか? 黒だとほとんど判読できません。現在のメニューのフォントを白にして、他の (現在のメニューではない) フォントを黒のままにするにはどうすればよいですか?

4

3 に答える 3

2

メニュー クラスだけでなく、アンカー タグ自体の色を指定する必要があります。あなたの CSS は十分に具体的ではないため、#000 が上書きされます。

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

より具体的になり、アンカー タグを正しくターゲットにする必要があります。

于 2012-10-17T15:55:48.323 に答える
1

これはおそらく特異性の問題です。次のようにしてください。

li.currentmenu a{
color:#fff !important;
border-radius:5px;
-moz-border-radius:5px;
background:transparent url('darkgray_backgroundOVER.gif') no-repeat top center;
}
于 2012-10-17T15:55:46.420 に答える
1

これは、.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;
}
于 2012-10-17T16:13:25.620 に答える