CSS Links class 적용방법?

Question

전체 페이지가 아닌 제가 작성한 글들만 적용시키고 싶어서

<style type="text/css">

.link a {

text-decoration: none;

color: blue;

font-size: 1.2em;

}

.visited a {

text-decoration: none;

color: blue;

font-size: 1.2em;

}

.hover a {

text-decoration: underline;

color: red;

font-size: 1.2em;important!

}

.active a {

text-decoration: underline;

color: red;

font-size: 1.2em;

}

</style>

<div class="link visited hover active">

<a href="https://www.a-ha.io/questions/create?categoryId=3">가상링크</a>

</div>

라고 코드를 짜보았습니다.

마우스 호버시 색깔이 red로 바뀌어야 하는데 그냥 다 red로만 적용되네요 ㅠ

어디를 수정해야할지 감이 안잡히네요 ㅠ

부탁드립니다.

Answer 1

CSS의 가상 클래스와 혼동하신 것 같습니다.

<style> a:link { text-decoration: none; color: blue; font-size: 1.2em; } a:visited { text-decoration: none; color: blue; font-size: 1.2em; } a:hover { text-decoration: underline; color: red; font-size: 1.2em;important! } a:active { text-decoration: underline; color: red; font-size: 1.2em; } </style> <div> <a href="https://www.a-ha.io/questions/create?categoryId=3">가상링크</a> </div>

가상 클래스는 따로 class를 쓰지 않아도 상태에 따라 자동으로 주어지며

클래스는 .클래스처럼 쓰지만 가상 클래스는 :가상클래스로 씁니다.

<style> #myarticle a:link { text-decoration: none; color: blue; font-size: 1.2em; } #myarticle a:visited { text-decoration: none; color: blue; font-size: 1.2em; } #myarticle a:hover { text-decoration: underline; color: red; font-size: 1.2em;important! } #myarticle a:active { text-decoration: underline; color: red; font-size: 1.2em; } </style> <div id="myarticle"> <a href="https://www.a-ha.io/questions/create?categoryId=3">가상링크</a> </div>

원하는 곳에만 적용되게 하려면 자손 선택자로 범위를 지정할 수 있습니다.