私たちが実現したい効果は、このサイト以外を指すすべてのリンクに小さなアイコンを追加して、このリンクをクリックするとこのサイトから移動することをユーザーに伝えることです。もちろん、これはより複雑な JavaScript を通じて実現できますが、現在では CSS 3 属性セレクターを通じてこの機能を実現できます。
a[href^=”http:”] {
背景:url(images/externalLink.gif) 繰り返しなし右上;
パディング右:10px;
とおり
です。 http: で始まるすべてのリンクには小さな矢印アイコンが追加され、これが外部リンクであることをユーザーに思い出させ、クリックするとユーザーはサイトから離れます。非常に使い勝手が良く、Webデザインの使いやすさを際立たせる機能と言えるでしょう。
もちろん、これは、このサイトを指すすべてのリンクが相対アドレスを使用しているためです。このサイトへのリンクも http: で始まる場合、または絶対アドレスと相対アドレスの両方を使用する場合はどうなりますか?次のコードを使用できます:
a[href^=”http:”] {
背景:url(images/externalLink.gif) 繰り返しなし右上;
パディング右:10px;
}
a [href*=”www.dudo.org”] {
背景:なし;
パディング:0;
、
http: で始まるものはすべて外部リンク アイコンとともに追加され、http ://www.dudo.org/で始まるものは使用されません。矢印アイコンは表示されません。
記事のソース: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm