글꼴 색상 CSS

Question

에서 제대로 상속하지 않습니다 나는 다음과 같은 headermenu 한 : 나는 styleshhet에서

%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가 아닌 것입니다. 파이어 버그는 현재 메뉴에서 취소 된 글꼴을 보여줍니다 :

li.currentmenu에서 상속. element.style { color : #FFFFFF; 이 대신에 전술}

쇼이다

.headermenu 상향 리튬 {A를 색상 : # 000000; 등 .... }

왜 글꼴이 흰색으로 표시되지 않습니까? 검은 색은 거의 읽을 수 없습니다. 현재 메뉴의 글꼴을 흰색으로 유지하고 다른 메뉴 (현재 메뉴가 아닌)의 글꼴을 검정색으로 유지하려면 어떻게해야합니까?

그것은 아마 특이성 문제의

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

은 구체적이며 앵커 태그를 올바르게 타겟팅해야합니다.

Answer 2

, 그냥 이렇게 :

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

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