CSS에서 클래스를 가진 링크
이제 링크 자체에 클래스가 있다고 가정해 봅시다:
<a href="#" class="eee">link</a>
<a href="#" class="eee">link</a>
<a href="#" class="eee">link</a>
그러한 클래스를 가진 링크에 대한 스타일을 설정해 보겠습니다:
a:link.eee, a:visited.eee {
color: red;
}
a:hover.eee {
text-decoration: none;
}
링크 클래스와 상태 의사 클래스(pseudo-classes)를 쓰는 순서는 중요하지 않습니다. 순서를 바꾸어도 아무것도 변하지 않습니다:
a.eee:link, a.eee:visited {
color: red;
}
a.eee:hover {
text-decoration: none;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 포함된 코드는 다음과 같습니다:
a.zzz {
color: red;
}
a.zzz:hover {
text-decoration: none;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 포함된 코드는 다음과 같습니다:
#block a.zzz {
color: red;
}
#block a.zzz:hover {
text-decoration: none;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 포함된 코드는 다음과 같습니다:
.block a.zzz {
color: red;
}
.block a.zzz:hover {
text-decoration: none;
}