css 선택자 질문입니다
조회수 408회
<!DOCTYPE html>
<style>
.button01 a:hover, .button01 a:active {
background-color: blue;
}
a.botton01:hover,a.button01:active {
background-color: blue;
}
</style>
<body>
<div>
<a href="#" class="button01">
Click me Button </a>
</div>
</body>
</html>
.button01 a:hover는 적용이 되지만, a.botton01:hover으로 선택자를 바꾸게 되면 적용이 되지 않습니다. 두 선택자의 차이는 무엇이고 두번째 양식을 썼을때 왜 적용이 안되는 건지... 궁금합니다 ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
말씀하신 '첫번째 양식'의 의미는 다음과 같습니다.
.button01 a:hover, .button01 a:active { ...button01이라는 클래스 속성을 가진 요소의 자식 요소 중a태그를 찾아 스타일을 지정하는 방법입니다.
말씀하신 '두번째 양식'의 의미는 다음과 같습니다.
a.botton01:hover,a.button01:active { ...- a 태그 중에
button01이라는 클래스 속성을 가진 a 태그만을 찾아 스타일을 지정하는 방법입니다.
따라서 작성하신 두가지 스타일 지정 방법은 하고자하는 목적이 다르다고 할 수 있습니다.
.button01 a:hover는 적용이 되지만,a.botton01:hover으로 선택자를 바꾸게 되면 적용이 되지 않습니다.라고 말씀하셨는데, 올려주신 코드에서는 두번째 방법이 적용된 것이 맞습니다.
도움이 되셨기를 바랍니다.
<style> .button01 a:hover, .button01 a:active { background-color: red; } a.botton01:hover, a.button01:active { background-color: green; } </style> <body> <div> <a href="#" class="button01"> button1 <!-- green 색상이 적용됩니다. --> </a> </div> <div class="button01"> <a href="#"> button2 <!-- red 색상이 적용됩니다. --> </a> </div> </body>참고
댓글 입력