Wenn wir eine Website entwerfen, müssen wir manchmal unterschiedliche Stile erstellen, die auf den Attributen von Seitenelementen basieren. Beispielsweise müssen wir unterschiedliche Linksymbole für unterschiedliche Linktypen anzeigen. CSS-Selektoren sind eine sehr nützliche Technologie, mit der wir leicht bestimmte Effekte erzielen können. Heute stellen wir den CSS-Attributselektor vor, indem wir einen personalisierten Linkstil erstellen.
Schauen wir uns zunächst die Demo an:
Wie Sie im Bild oben sehen können, haben wir für jeden Linktyp unterschiedliche Stile definiert: Wenn der Wert des href-Attributs von Link a der E-Mail-Link „mailto“ ist, wird hinter dem Link ein Mail-Symbol angezeigt Wenn es sich um eine Word-Datei handelt, wird das Word-Dokument-Symbol auf der Rückseite angezeigt. Wenn die Link-Adresse „qianduan.net“ enthält, wird das Symbol für den Musik-Player angezeigt
. Es ist sehr einfach, eine solche Funktion zu implementieren. Schauen wir uns zunächst die Syntax von CSS-Attributselektoren an:
Es ist zu beachten, dass der CSS-Selektor unabhängig von der CSS 2.1-Version oder der CSS 3-Version von IE7 und IE8 sowie von Webkit, Gecko Core und Opera unterstützt wird. Nur Browser unter IE6 unterstützen ihn nicht.
Okay, implementieren wir diese Stile:
1. Grundlegender Stil von Links Zuerst haben wir ein CSS-Sprites-Bild vorbereitet und alle Symbole in dieses a.gif integriert.
| A { Hintergrund: URL (a.gif) keine Wiederholung, rechts 4 Pixel; padding-right:18px; Farbe:#369; Zeilenhöhe:24px; } |
Auf diese Weise haben wir den Standardstil für alle Links definiert und auf der rechten Seite aller Links wird ein kleines rotes Pfeilsymbol angezeigt.
2. Definieren Sie personalisierte Stile. Definieren wir nun die jeweiligen Stile für verschiedene Arten von Links. Eigentlich müssen wir zu diesem Zeitpunkt nur verschiedene Hintergrundbildpositionen (Hintergrundposition) definieren:
mailtomailtoDer Mail-Link hat die Form href= „mailto:[email protected]“-Stil, der Wert ihres href-Attributs beginnt mit mailto, dann verwenden wir das Format [att^=val]:
| a[href^="mailto:"] { Hintergrundposition:rechts -242px; } |
| a[href$=".doc"] { Hintergrundposition:rechts -160px } |
Auch Dokumente in PDF, Excel, MP3 und anderen Formaten werden über diese Methode umgesetzt.
Links, die das Feld qianduan.net enthalten, können Sie [att*=val] verwenden:
| A { Hintergrund: URL (a.gif) keine Wiederholung, rechts 4 Pixel; padding-right:18px;color:#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"] {Hintergrundposition:rechts -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} |
Und wenn wir es verwenden, müssen wir keine zusätzlichen Klassen hinzufügen:
| <a href="abc.doc">Word-Dokument</ ein > |