[css] 링크에서 완고한 밑줄 제거

밑줄없이 링크를 흰색으로 표시하려고합니다. 텍스트 색상이 흰색으로 올바르게 표시되지만 파란색 밑줄이 완고하게 유지됩니다. 나는 노력 text-decoration: none;과 text-decoration: none !important;는 CSS에 링크 밑줄을 제거 할 수 있습니다. 둘 다 일하지 않았다.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

스 니펫 확장

링크에서 파란색 밑줄을 어떻게 제거합니까?

답변

예상대로 text-decoration: none;앵커 ( .boxhead a) 에는 적용되지 않고 범위 요소 ( .boxhead) 에는 적용 하고 있습니다.

이 시도:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

답변

앵커 태그 (링크)에는 방문, 호버, 링크 및 활성과 같은 의사 클래스도 있습니다. 스타일이 해당 주에 적용되고 다른 스타일과 충돌하지 않는지 확인하십시오.

예를 들면 다음과 같습니다.

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

사용자 액션 의사 클래스 : hover, : active 및 : focus 에 대한 자세한 내용 은 W3.org 를 참조하십시오 .

답변

text-decoration: none !important그것을 제거해야합니다 .. 당신은 border-bottom: 1px solid에 대해 숨겨져 있지 않은가? (IE의 Firebug / F12에서 계산 된 스타일 추적)

답변

이 속성을 앵커 태그에 추가하십시오.

style="text-decoration:none;"

예:

<a href="page.html"  style="text-decoration:none;"></a>

또는 CSS 방식을 사용하십시오.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

답변

때때로 당신이보고있는 것은 텍스트 밑줄이 아닌 상자 그림자입니다.

이것을 시도하십시오 (당신에게 적합한 CSS 선택기를 사용하십시오) :

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

답변

당신이 놓친 text-decoration:none에 대한 앵커 태그 . 따라서 코드는 다음과 같아야합니다.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

스 니펫 확장

텍스트 장식을위한 더 많은 표준 속성

답변

페이지를 보지 않고 추측하기 어렵다.

그러나 당신 border-bottom: 1px solid blue;이 적용되고 있는 것처럼 들립니다 . 아마도 추가하십시오 border: none;. text-decoration: none !important그래도 CSS를 재정의하는 다른 스타일이있을 수 있습니다.

Firefox 웹 개발자 툴바를 사용하는 것이 멋진 곳입니다. CSS를 편집하고 적어도 Firefox에서 작동하는지 확인할 수 있습니다. 아래에 CSS > Edit CSS있습니다.