하이퍼 링크에서 모든 스타일링 / 포맷 제거


157

다른 색상의 단어 ( href링크)가 있는 탐색 메뉴를 만들고 있습니다. 모든 상태 (호버, 방문 등)에서 색상이 변경되지 않도록하고 싶습니다.

다른 상태의 색상을 설정하는 방법을 알고 있지만 텍스트 색상 (및 다른 스타일링 / 서식)을 그대로 유지하는 코드를 알고 싶습니다.

어떤 제안?

답변:


248

당신은 단순히 무시할 것이다, 링크 스타일을 정의 할 수 있습니다 a:hover, a:visited등 :

a {
  color: blue;
  text-decoration: none; /* no underline */
}

inherit부모 스타일의 속성을 대신 사용하려는 경우이 값 을 사용할 수도 있습니다 .

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

4
중요한 부분은 inherit키워드입니다. 불행히도 100 % 지원이 없습니다.
david

2
initialCSS를 기본 스타일로 재설정하려는 경우에도 유용합니다. 이것은 링크에
SiteHopper

너무 감사합니다 inherit!
parsecer

@ 데이빗, 아직도 서있어? 않습니다 inherit만 anciet 브라우저 및 Internet Explorer 작업을 너무 많이 사용되는 브라우저 (크롬, 파이어 폭스)의 어려움이있다 없다?
parsecer

1
설정 해제 도 확인하십시오 . >> unset CSS 키워드는 속성을 부모로부터 상속 받으면 상속 된 값으로, 그렇지 않으면 초기 값으로 재설정합니다. 즉, 첫 번째 경우 inherit 키워드처럼 작동하고 두 번째 경우에서는 초기 키워드처럼 작동합니다.
JackMorrissey

4

Chris가 나에게 말했듯이 그냥 a무시해야합니다. 예를 들면 다음과 같습니다.

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

이 경우 .nav a항상 녹색이되며 : hover는 적용되지 않습니다.

영향을 미치는 다른 규칙이 있으면 !important을 사용해야하지만 그렇게해서는 안됩니다. 빠지는 것은 나쁜 습관입니다.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

그러면 다른 규칙과 상관없이 항상 녹색이됩니다.


이것은 그가 요구 한 것이 아닙니다. 질문을 다시 읽으십시오. 그는 이미 이것을 알고 있습니다.
david

@ david 나는 다시 읽었습니다. 그가 그가 요구 한 것입니다. 이 코드는 그를의 스타일 설정 할 수 a있는 변경 사항 방지 할 수 있습니다 :hover(또는 :visited등). 성가신 대신 세 가지 답변을 모두 쓰레기로 버리는 대신 어떻습니까?
SpoonNZ

도와 주셔서 감사합니다. 그러나 링크가 이와 같다면 어떨까요? 2 개의 색깔에있는 2 개의 낱말, 그러나 그것은 단지 1 개의 연결이다 : 유일한 (분홍색) 판매 (검정색) 그리고 그들은 어떤 상태에서든지 그 색깔을 유지해야합니다. 이 방법으로 인라인으로 코딩했습니다 ... <a href="#" style="text-decoration: none" target="_blank"> <span style = "font-family : Arial; font-size : 13px; color : # e91974; font-weight : lighter; "> 고유 </ span> <span style ="font-family : Arial; font-size : 13px; color : # 020202; font-weight : lighter; "> 판매 </ span > </a> 그러나 청소기가 있어야합니다. (코드에서 이와 같은 많은 링크가있는 곳) 제안 사항이 있습니까?
SiteHopper

1

a스타일 시트에서 선택기를 사용 하여 앵커 / 하이퍼 링크의 모든 상태를 정의 할 수 있습니다 . 예를 들면 다음과 같습니다.

a {
    color: blue;
}

모든 링크 스타일을 무시하고 모든 상태를 파란색으로 만듭니다.


이것은 그가 요구 한 것이 아닙니다. 질문을 다시 읽으십시오. 그는 이미 이것을 알고 있습니다.
david

-1

a.redLink{color:red;}마우스를 올리면 상태 를 유지하고 추가 a.redLink:hover{color:red;} 하면 다른 호버 상태가 링크 색상을 변경하지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.