[html] 방문시 앵커 태그의 색상 변경 비활성화

Program / 글쓴이

방문시 앵커 태그의 색상 변경을 비활성화해야합니다. 내가 했어:

a:visited{ color: gray }

(링크는 방문하기 전에 색상이 회색입니다.) 그러나 이것은 링크를 방문한 후 색상을 명시 적으로 지정하는 방법입니다. 다시 한 번 색상 변경입니다.

명시적인 색상 변경없이 방문시 앵커 태그의 색상 변경을 비활성화하려면 어떻게해야합니까?

답변

당신은 할 수 없습니다. 방문한 상태에만 스타일을 지정할 수 있습니다.

이것을 발견하는 다른 사람들의 경우 올바른 순서로 있는지 확인하십시오.

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

답변

앵커 색상을 앵커의 부모 요소와 동일하게 유지하려면 inherit를 활용할 수 있습니다. 

a, a:visited, a:hover, a:active {
  color: inherit;
}

각 선택기에 대해 규칙을 반복 할 필요가 없습니다. 쉼표로 구분 된 선택기 목록을 사용하십시오 (앵커 의사 요소의 순서는 중요합니다). 또한 특수 앵커 색상을 선택적으로 비활성화하려면 의사 선택기를 클래스에 적용 할 수 있습니다.

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

귀하의 질문은 방문한 주에 대해서만 묻지 만 모든 주를 의미한다고 생각했습니다. 방문하지 않은 모든 사용자에게 색상 변경을 허용하려면 다른 선택기를 제거 할 수 있습니다.

답변

내용은 :hover무시하는 :visited,하고 있는지 확인하는 :visited최초의 색상과 동일, :hover이후에 와야합니다 :visited.

따라서 색상 변경을 비활성화하려면 a:visited앞에 와야합니다 a:hover. 이렇게 :

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

:visited변경 을 비활성화하려면 유사 클래스가 아닌 스타일로 스타일을 지정합니다.

a, a:visited { color: gray; }
a:hover { color: red; }

답변

선택기를 삭제하거나 텍스트가 정상적으로 표시되는 것과 같은 색상으로 설정하십시오.

답변

SASS와 같은 일부 전처리기를 사용하는 경우 다음 @extend기능 을 사용할 수 있습니다 .

a:visited {
  @extend a;
}

결과적으로 a:visited선택기가있는 모든 스타일에 대해 자동으로 추가 된 선택기 가 표시 a되므로 스타일 테이블의 크기가 매우 커질 수 있으므로 신중하게 선택하십시오.

절충안으로 정말로 필요한 블록에만 @extend를 추가 할 수 있습니다.

답변

a:link및 a:visited선택기를 함께 호출하여이 문제를 해결할 수 있습니다 . 그리고 a:hover선택기로 따르십시오 .

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

답변

색상을 설정하면 a:visited좋지 않다고 생각합니다 . 태그의 기본 색상을 알고 a매번 a:visited.

기본 색상에 대해 알고 싶지 않습니다 ( common.css응용 프로그램 에서 설정 하거나 외부 스타일을 사용할 수 있음).

나는 그것이 좋은 해결책이라고 생각합니다.

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}