CSS Links class 적용방법?
전체 페이지가 아닌 제가 작성한 글들만 적용시키고 싶어서
<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로만 적용되네요 ㅠ
어디를 수정해야할지 감이 안잡히네요 ㅠ
부탁드립니다.
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>원하는 곳에만 적용되게 하려면 자손 선택자로 범위를 지정할 수 있습니다.
