a.class와 .class의 차이점, 공백에 주의하세요 - CSS 디버깅 팁

이 문제는 이미지 스프라이트 기술을 사용하여 이미지를 배치할 때 발생합니다. 때때로 공백으로 인해 많은 문제가 발생할 수 있습니다. 이 글에서는 a.class와 a.class의 차이점을 예시로 소개합니다. (CSS 비디오 튜토리얼)

그룹 1

<a href="#"><span class="ico-manage">管理</span></a>

스타일 1 사용:

a:hover{color:black}
a:hover.ico-manage{color:red;}

이때 마우스가 "Management"라는 단어 위로 지나갔을 때 색상은 검정색입니다

스타일 2 사용:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

이때 마우스가 "관리"라는 단어 위로 지나가고 색상이 빨간색입니다

두 번째 그룹

<a href="#" class="ico-manage">管理</a>

스타일 1 사용:

a:hover{color:black}
a:hover.ico-manage{color:red;}

이때 마우스가 "Management"라는 단어 위로 지나가고 색상이 빨간색입니다

스타일 2 사용:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

이때 마우스가 "Management"라는 단어 위로 지나가고 색상은 검정색입니다

첫 번째 그룹 a 및 .ico-manage의 경우 .ico-manage는 a에 속합니다. 레이블은 a와 다른 수준이고 a 및 .ico-manage의 두 번째 그룹의 경우 .ico-manage는 a에 속합니다. 즉, a와 동일한 수준이라는 결론을 내릴 수 있습니다.

1. 클래스가 현재 태그의 속성인 경우 스타일은 다음과 같이 작성됩니다. 태그 + 클래스 이름

2. 클래스가 하위 태그의 속성인 경우 스타일은 태그+공백+클래스 이름

으로 작성됩니다.

위 내용은 a.class와 .class의 차이점, 공백에 주의하세요 - CSS 디버깅 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!