CSS Links class 적용방법?

2019. 07. 12. 06:28

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

<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로만 적용되네요 ㅠ

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

부탁드립니다.

공유하고 돈벌기 ♥︎

총 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>

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

2019. 07. 12. 07:19
38