Manchmal möchten wir möglicherweise, dass interne Links andere Stile anzeigen als externe Links, z. B. externe Links. Ich möchte neben dem Link ein kleines Symbol hinzufügen, um anzuzeigen, dass es sich um einen externen Link handelt, um Besuchern mitzuteilen und ihnen die Bestätigung zu geben, ob sie in einem neuen Fenster oder in diesem Fenster öffnen möchten. Wir könnten Folgendes tun:
| Nachfolgend der zitierte Inhalt: .extern { Hintergrund:url(images/external.gif) no-repeat rechts oben; padding-right:12px; } |
Dann wenden Sie das CSS auf jeden externen Link an. Das ist natürlich nicht unmöglich, aber es ist einfach zu umständlich.
Gibt es also einen guten Weg, dies zu erreichen? haben. Sie können die Attributauswahl in CSS3 verwenden, diese Methode wird jedoch in IE6 und niedriger nicht unterstützt. Sie wurde in FireFox implementiert.
Die grundlegende Syntax des Attributselektors lautet: [att^=val]
Zum Beispiel:
| Nachfolgend der zitierte Inhalt: a[href^="http://www.admin5.com"] { Hintergrundbild:keine; padding-right:0px; } |
Alle Links, die mit http://www.cz268.com.cn beginnen, werden gefunden und Hintergrundbilder werden ausgeschlossen. Mit den oben genannten Attributen ist die Handhabung einfacher
| Nachfolgend der zitierte Inhalt: <style type="text/css"> A { Hintergrund:url(external.gif) no-repeat rechts oben; padding-right:14px; Schriftgröße:12px; } a[href^="http://www.cz268.com.cn"] { Hintergrundbild:keine; padding-right:0px; } </style> |
Fügen Sie zunächst allen Links Symbole hinzu und entfernen Sie dann die Linksymbole, die mit http://www.cz268.com.cn beginnen. Dadurch können externe Links Symbole anzeigen und interne Links keine Symbole anzeigen.
Hinweis: Dies gilt für Firefox, jedoch nicht für IE.
| Nachfolgend der zitierte Inhalt: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |