Web サイトをデザインするときは、ページ要素の属性に基づいて異なるスタイルを作成する必要がある場合があります。たとえば、リンクの種類ごとに異なるリンク アイコンを表示します。 CSS セレクターは、特定の効果を簡単に実現できる非常に便利なテクノロジーです。今日は、パーソナライズされたリンク スタイルを作成することで、CSS 属性セレクターを紹介します。
まずはデモを見てみましょう:
上の図でわかるように、リンクの種類ごとに異なるスタイルを定義しています。リンク a の href 属性の値が「mailto」電子メール リンクの場合、リンクの後ろにメール アイコンが表示されます。 Word ファイルの場合は Word ドキュメントのアイコンが表示され、リンク アドレスが mp3 の場合は音楽プレーヤーのアイコンが表示され、リンク アドレスに「qianduan.net」が含まれている場合はホームページのアイコンが表示されます
。このような関数を実装するのは非常に簡単です。まず CSS 属性セレクターの構文を見てみましょう。
CSS セレクターは、CSS 2.1 バージョンまたは CSS 3 バージョンに関係なく、IE7 と IE8、および Webkit、Gecko コア、および Opera でサポートされていないことに注意してください。
さて、これらのスタイルを実装しましょう:
1. リンクの基本スタイル まず、CSS スプライト画像を準備し、すべてのアイコンをこの a.gif に統合しました。
| { 背景:url(a.gif) 繰り返しなし、右 4 ピクセル; パディング右:18px; 色:#369; 行の高さ:24px; この |
ようにして、すべてのリンクのデフォルト スタイルを定義しました。小さな赤い矢印アイコンがすべてのリンクの右側に表示されます。
2. パーソナライズされたスタイルを定義する ここで、さまざまなタイプのリンクにそれぞれのスタイルを定義しましょう。実際、現時点で行う必要があるのは、さまざまな背景画像の位置 (background-position) を定義することだけです。
mailtomailtoメール リンクは href= の形式です。 " mailto:[email protected]" スタイルの場合、href 属性の値は mailto で始まり、[att^=val] の形式を使用します。
| a[href^="mailto:"] { 背景位置:右 -242px; |
| 、 |
| a[href$=".doc"] { 背景位置:右 -160px |
PDF、Excel、mp3、その他の形式のドキュメントもこの方法で実装されます
| 。 |
qianduan.net フィールドを含むリンク 特定の文字列を含むリンクの場合、[att*=val] を使用できます。
| { 背景:url(a.gif) 繰り返しなし、右 4 ピクセル; パディング右:18px;色:#369;行の高さ:24px; } a[href^="mailto:"] {background-position:right -242px;} a[href$=".doc"] {背景位置:右 -161px} a[href$=".xls"] {背景位置:右 -282px} a[href$=".pdf"] {背景位置:右 -79px} a[href$=".mp3"] {背景位置:右 -204px} a[href$=".swf"] {背景位置:右 -120px} a[href$=".rar"] {背景位置:右 -38px} a[href*="qianduan.net"] {background-position:right -328px} |
また、これを使用する場合、追加のクラスを追加する必要はありません:
| Word ドキュメント |