CSS 유사 선택기, 즉 :active, :hover, :link 및 :visited를 사용하여 링크의 다양한 상태에 스타일을 지정할 수 있습니다. 적절한 기능을 위해 이러한 선택기의 순서는 다음과 같습니다:- :link, :visited, :hover, :active.
구문
CSS text-indent 속성의 구문은 다음과 같습니다 -
a:(pseudo-selector) {
/*declarations*/
} 예시
다음 예는 링크의 다양한 상태의 스타일을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 20px;
display: flex;
float: left;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
첫 번째 링크를 가리키면 다음과 같은 결과가 나타납니다. -
두 번째 링크를 클릭하는 동안 다음 출력을 얻습니다. -
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
첫 번째 링크를 가리키면 다음과 같은 결과가 나타납니다. -
첫 번째 링크를 클릭하는 동안 다음 출력이 반환됩니다.
