앵커 태그 내부 스팬 스타일링

Question

이 모양을 예쁘게 보이려고하지만 문제가 발생했습니다. 앵커 태그 안에 자막 또는 간단한 설명이 포함 된 span 요소가 있습니다. 불행히도 그것은 앵커와 같은 스타일입니다. 이것은 내가 원하는 방식이 아닙니다. 스팬 자체에 스타일을 적용 해 보았지만 앵커 스타일에 의해 오버라이드 된 것으로 보입니다. 문제는 링크가 넘어 졌을 때 밑줄이 표시되기를 원하지 않는다는 것입니다.

여기 내 HTML입니다.

 <ul> 
      <li><a href="#">A <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">B <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">C <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">D <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">E <span class="subTitle">Subtitle</span></a></li> 
     </ul> 

그리고 내 CSS는

#leftNav ul li { position: relative; } 
#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    color:   #000000; 
    display:   block; 
    font-size:  12px; 
    left:   10px; 
    position:  absolute; 
    text-decoration: none; 
} 

나는 어떤 영향을 미칠 것 같지 않는 범위 자체를 스타일링 시도했습니다. 스팬을 앵커 바깥에 놓으면 리에 대해서 상대적으로 작동하지 않습니다. 스팬은 앵커의 호버 이벤트를 차단하고 클릭 할 수 없습니다.

Answer 1

(주위 ID로 적절한 DIV에 추가) 샘플 코드의 테스트가 잘 작동하는 것 같다 :

http://jsfiddle.net/44ndf/1/

그것의 기본 스타일은 물론있을 것입니다 앵커와 동일하므로 잠재적으로 다시 정상화해야합니다. 문제가있는 곳을 정확히 좁히기 위해서는 작동하는 (또는 정확하지 않은) 샘플을 제공해야합니다. 결론적으로

확인하는 일이 포함되어 있지만 :

1) 선택기는 확실히 위에서 내가 셀렉터를 선택하기 위해 ID가 "leftNav"와 사업부를 포함했다 예 (올바른 요소를 가리키는 것을 위로

2) 당신은 defintiely 충돌 스타일을 가지고 있지 않을 수도 있습니다 - 아마도 더 높은 우선 순위를 가진 무언가 또는!

3) Firebug를 사용하여 문제가있는 곳을 식별하기 위해 CSS 선택기에서 적용되는 스타일을 정확하게 확인하십시오.

편집 :

불가능하다는 것 밑줄의 경우

(또는 적어도 내가 찾은 어떠한 방식)를 스타일링을 무시할. 그래서 그 대신 나는 조금 주위에 마크 업을 변경 :

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a> 

을이 마크 업을 통해 다음과 같이 스타일을 설정할 수 있습니다

#leftNav ul li a span.subTitle 
{ 
    text-decoration: none; 
} 

#leftNav ul li a span 
{ 
text-decoration: underline; 
} 

#leftNav ul li a 
{ 
text-decoration: none; 
} 

이 기본적으로 밑줄을하지 앵커를 알려줍니다. 모든 밑줄에는 밑줄이 표시되지 않으며 자막에는 밑줄이 표시되지 않습니다. 밑줄을 긋고 싶어하는 모든 사람이 스팬에 있는지 확인해야합니다 (스팬에없는 것은 밑줄이 그어지지 않습니다).

IE에서 자막에 밑줄이없는 것은 나에게 브라우저 버그가있는 것처럼 보이지만, IE의 자막에는 밑줄이 없다.하지만 파이어 폭스에서는 그렇지 않다. 나는 앵커가 겹쳐 쓰지 않는 밑줄을 특별한 특별한 것으로 보아 의심치 않습니다.

Answer 2

어떤 스타일링 앵커 태그가 있는지 알 수 없기 때문에 무엇이 문제인지는 잘 모르겠지만 CSS 규칙 후에 항상 !important을 사용해보세요. 이런 식으로 뭔가가 :

#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    display:   block; 
    font-size:  12px !important; 
    left:   10px; 
    position:  absolute; 
}