場合によっては、内部リンクに外部リンクなど、外部リンクとは異なるスタイルを表示したい場合があります。リンクの横に小さなアイコンを追加して、それが外部リンクであることを示し、訪問者に新しいウィンドウで開くかこのウィンドウで開くかを確認できるようにしたいと考えています。これを行うとよいでしょう:
| 引用した内容は以下の通りです。 。外部の { 背景:url(images/external.gif) 繰り返しなし右上; パディング右:12px; } |
次に、各外部リンクに CSS を適用します。もちろん、これは不可能ではありませんが、あまりにも面倒です。
それで、それを達成する良い方法はありますか？持っている。 CSS3 では属性選択を使用できますが、この方法は IE6 以前ではサポートされていません。FireFox では実装されています。
属性セレクターの基本構文は次のとおりです: [att^=val]
例えば：
| 引用した内容は以下の通りです。 a[href^="http://www.admin5.com"] { 背景画像:なし; パディング右:0px; } |
http://www.cz268.com.cn で始まるすべてのリンクが検索され、背景画像は除外されます。上記の属性があると扱いやすくなります
| 引用した内容は以下の通りです。 <style type="text/css"> ある { 背景:url(external.gif) 繰り返しなし右上; パディング右:14px; フォントサイズ:12px; } a[href^="http://www.cz268.com.cn"] { 背景画像:なし; パディング右:0px; } </スタイル> |
まずすべてのリンクにアイコンを追加し、次に http://www.cz268.com.cn で始まるリンク アイコンを削除します。これにより、外部リンクにはアイコンが表示され、内部リンクにはアイコンが表示されなくなります。
注: これは Firefox には適用されますが、IE には適用されません。
| 引用した内容は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |