때로는 내부 링크가 외부 링크와 같은 외부 링크와 다른 스타일을 표시하기를 원할 수도 있습니다. 링크 옆에 작은 아이콘을 추가하여 외부 링크임을 나타내고 방문자에게 새 창에서 열지 이 창에서 열지 여부를 확인할 수 있도록 하고 싶습니다. 우리는 이렇게 할 수 있습니다:
| 인용된 내용은 다음과 같습니다. .외부 { background:url(images/external.gif) 오른쪽 상단 반복 없음; 오른쪽 패딩:12px; } |
그런 다음 각 외부 링크에 CSS를 적용합니다. 물론 불가능하지는 않지만 너무 번거롭습니다.
그렇다면 그것을 달성하는 좋은 방법이 있습니까? 가지다. CSS3에서는 속성 선택을 사용할 수 있지만 IE6 이하에서는 이 방법이 지원되지 않습니다. FireFox에서는 구현되었습니다.
속성 선택기의 기본 구문은 다음과 같습니다: [att^=val]
예를 들어:
| 인용된 내용은 다음과 같습니다. a[href^="http://www.admin5.com"] { 배경 이미지:없음; 오른쪽 패딩:0px; } |
http://www.cz268.com.cn으로 시작하는 모든 링크를 찾을 수 있으며 배경 이미지는 제외됩니다. 위의 속성을 사용하면 처리하기가 더 쉽습니다.
| 인용된 내용은 다음과 같습니다. <스타일 유형="텍스트/css"> 에이 { background:url(external.gif) 오른쪽 상단 반복 없음; 오른쪽 패딩:14px; 글꼴 크기:12px; } a[href^="http://www.cz268.com.cn"] { 배경 이미지:없음; 오른쪽 패딩:0px; } </style> |
먼저 모든 링크에 아이콘을 추가한 다음 http://www.cz268.com.cn으로 시작하는 링크 아이콘을 제거하면 외부 링크는 아이콘을 표시하고 내부 링크는 아이콘을 표시하지 않게 됩니다.
참고: 이는 Firefox에는 적용되지만 IE에는 적용되지 않습니다.
| 인용된 내용은 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |