私たちが達成したい効果は、このリンクをクリックすると外部リンクであるこのサイトを離れることをユーザーに伝えるために、このサイトを指すすべてのリンクに小さなアイコンを追加することです。もちろん、これはより複雑な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;
}
上記の2つのルールは次のとおりです。http:http:http://www.dudo.org/が続く外部リンクで追加されるすべてのアイコンは使用されていないため、それらは自然にアドレスに関連しています。 httpから始めます。
出典:http://www.dudo.org/article/cssjs/use_new_tech_of_css.htm