우리가 달성하려는 효과는이 사이트를 가리키는 모든 링크에 작은 아이콘을 추가 하여이 링크를 클릭하면 외부 링크 인이 사이트를 떠날 수 있다고 사용자에게 알리는 것입니다. 물론 이것은보다 복잡한 JavaScript를 통해 달성 될 수 있지만 이제 CSS 3 속성 선택기를 통해이 기능을 구현할 수 있습니다.
a [href^=”http :”] {
배경 : URL (images/externallink.gif) 비 반복 오른쪽 상단;
패딩 오른쪽 : 10px;
}
위의 코드는 다음을 의미합니다. HTTP로 시작하는 모든 링크에는 작은 화살표 아이콘이있어 사용자가 외부 링크가되도록하고 사용자는 클릭 하여이 사이트를 떠납니다. 이 기능은 매우 사용자 친화적이며 웹 디자인의 사용 편의성을 강조합니다.
물론 이것은 상대 주소를 사용하는이 사이트에 대한 링크를위한 것입니다. 이 사이트에 대한 링크가 HTTP : 또는 절대 주소 및 상대 주소를 모두 사용하는 경우 어떻게해야합니까? 다음 코드를 사용할 수 있습니다.
a [href^=”http :”] {
배경 : URL (images/externallink.gif) 비 반복 오른쪽 상단;
패딩-오른쪽 : 10px;
}
a [href*=”www.dudo.org”] {
배경 : 없음;
패딩 : 0;
}
위의 두 가지 규칙은 다음과 같습니다. http : http : 외부 링크와 함께 추가 된 다음 http://www.dudo.org/가 추가되며 사용되지 않으므로 주소와 관련하여 자연스럽게 사용되지 않기 때문에 자연스럽게 주소와 관련이 있습니다. HTTP로 시작하십시오. 화살표 아이콘이 나타나지 않습니다.
출처 : http://www.dudo.org/article/cssjs/use_new_tech_f_css.htm