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

PHPz
풀어 주다: 2017-04-23 11:28:29
원래의
2699명이 탐색했습니다.

이 문제는 이미지 스프라이트 기술을 사용하여 이미지를 배치할 때 발생합니다. 때때로 공백으로 인해 많은 문제가 발생할 수 있습니다. 이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿