Webサイトを設計するときは、ページ要素の属性に基づいて異なるスタイルを作成する必要がある場合があります。たとえば、さまざまなリンクタイプの場合、異なるリンクアイコンが表示されます。 CSSセレクターは非常に便利な手法であり、それらを通じて特定の効果を簡単に達成できます。今日は、パーソナライズされたリンクスタイルを作成することにより、CSSのプロパティセレクターを紹介します。
最初にデモを見てみましょう：
上記の図に見られるように、リンクごとに異なるスタイルを定義します。リンクAのhref属性が「mailto」メールリンクである場合、リンクの背後にメールのアイコンが表示されます単語ファイルを使用すると、リンクアドレスがMP3の後ろに表示されます。
実際、このような関数を実装するのは非常に簡単です。
IE7とIE8は、CSS 2.1またはCSS 3バージョンに関係なくCSSセレクターをサポートしており、IE6以下のブラウザのみがサポートされていないことに注意してください。
OK、これらのスタイルを実装しましょう。
1.リンクの基本スタイルまず、CSSスプライト画像を準備し、すべてのアイコンをこのA.GIFに統合します。
| { 背景：url（a.gif）repeat right 4px; パディング右：18px; 色：＃369; ラインハイト：24px; } |
このようにして、すべてのリンクのデフォルトスタイルを定義し、すべてのリンクの右側に小さな赤い矢印アイコンが表示されます。
2。実際、さまざまな種類のリンクに対して独自のスタイルを定義します。
MailTomailto Mailリンクは、href = "mailto：[email protected]"のスタイルです。
| a [href^= "mailto："] { バックグラウンドポジション：右-242px; } |
一般に、すべてのdocファイルリンクはhref = "abc.doc"の形式であると考えています。つまり、リンクアドレスは.docで終了するため、[att $ = val]の形式を使用する必要があります。スタイルは次のとおりです。
| a [href $ = "。doc"] { バックグラウンドポジション：右-160px } |
PDF、Excle、MP3形式のドキュメントもこのように実装されています。
特定の文字列を含むリンク用のQianduan.netフィールドを含むリンク[att*= val]を使用できます。
| { 背景：url（a.gif）repeat right 4px; パディング右：18px;色：＃369; line-height：24px; } a [href^= "mailto："] {background -position：right -242px;} a [href $ = "。doc"] {background -position：right -161px} a [href $ = "。xls"] {background -position：right -282px} a [href $ = "。pdf"] {background -position：right -79px} a [href $ = "。mp3"] {background -position：right -204px} a [href $ = "。swf"] {background -position：right -120px} a [href $ = "。rar"] {background -position：right -38px} a [href*= "qianduan.net"] {background -position：right -328px} |
そして、それを使用するとき、私たちは追加のクラスを追加する必要はありません：
| <a href = "abc.doc"> word document </a> |