CSS3-Attributauswahl für den Dateityp
Das Attributselektoren ist eine sehr nützliche Funktion, um ein Element auszuwählen, ohne überflüssig zu werden Ich würde oder Klassen. Solange das anvisierte Element ein Attribut wie hat href, src und Art wir müssen das nicht tun.
Die Attributselektoren waren tatsächlich vorhanden seit CSS 2.1, Mit einigen weiteren Typen von Attributselektoren in den CSS3-Spezifikationen können wir das Attribut des Elements noch gezielter ansprechen.
Und in diesem Beitrag verwenden wir eine der Syntax, um das auszuwählen Dateityp das wird als Teil des Attributwerts eingefügt.
Die Syntax- und Browserunterstützung
Das Dateityp steht immer am Ende des Dateinamens. Also, um das auszuwählen Dateityp Wir können die folgende Syntax verwenden [attr $ = "value"]. Diese Syntax verwendet die $ = Operator, der auf das Ende des Attributwerts abzielt, zum Beispiel:
a [href $ = ". pdf"]: vor background: url ('… /images/document-pdf-text.png') keine Wiederholung; Das obige Snippet wählt jeden Link aus, mit dem der Attributwert endet .pdf und fügen Sie ein Word-Dokument-Symbol in das ein :Vor Pseudoelement.
PDF-Symbolquelle: Fugensymbole
Obwohl dies eine häufige Verwendung dieses Selektors ist, können wir sicherlich darüber hinausgehen.
In Bezug auf die Browserkompatibilität; Obwohl diese Syntax offiziell als CSS3-Spezifikation eingeführt wurde, wurde sie seitdem tatsächlich unterstützt Internet Explorer 7, So können Sie es sicher in allen Ihren Designs anwenden.
Das Beispiel
Du wirst es nie wissen, wenn du es nie versuchst. Wir müssen nur etwas Neues ausprobieren, um etwas zu verstehen, das wir noch nicht verstehen. Wir werden hier also zeigen, wie diese Syntax sehr hilfreich und praktisch sein kann, um auf ein Element in einer bestimmten HTML-Struktur zu zielen, das bisher nur mit CSS zu verwenden war.
Unten haben wir eine HTML5-Struktur um drei Bilder mit der Bildunterschrift aufzulisten. Es dient nur zu Demonstrationszwecken. Ihr Markup muss nicht genau wie das folgende Snippet sein (z. B. haben Sie möglicherweise nur ein Bild oder sogar drei weitere Bilder), aber Sie müssen wissen, wie diese Syntax angewendet werden kann eine bestimmte HTML-Struktur.
-
jpg -
png -
gif
Jedes der oben aufgeführten Bilder hat die folgenden Formate oder Erweiterungen, jpg, png, und gif. Sie haben auch eine Bildunterschrift, die die Bilderweiterung darstellt. Diese Bildunterschrift fungiert dann als Bildbeschriftung.
Hier ist also der Plan, wir werden für jede Bilderweiterung unterschiedliche Hintergrundfarben für die Bildunterschrift angeben. Das JPG-Bild erhält eine Grün Beschriftungsfarbe wird das PNG erhalten Blau, und schließlich wird das gif erhalten lila.
Lassen Sie uns zunächst die Position des Figur-Tags relativ setzen, da wir dies anwenden werden absolut Position für die Bildunterschrift.
Figur Position: relativ;
Fügen Sie eine kleine Verzierung für die Bilder mit Rahmen und Schatten hinzu.
img border: 5px fest #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); Box-Schatten: 1px 1px 3px 0px rgba (0, 0, 0, .5);
Dann legen wir den Standardstil und die Standardposition für die Beschriftung fest. Die Bildunterschrift oder das Beschriftungsfeld hat ein Quadrat von 50 Pixel.
img + figcaption color: #fff; Position: absolut; oben: 0; rechts: 0; Breite: 50px; Höhe: 50px; Zeilenhöhe: 50px; Text ausrichten: Mitte;
Nun ist es Zeit, die Hintergrundfarbe hinzuzufügen. Dazu können wir den Attributselektor mit dem benachbarten Geschwisterselektor kombinieren, +.
img [src $ = ". jpg"] + figcaption Hintergrundfarbe: # a8b700;
Das obige Snippet zielt auf jedes Bild ab, dessen Quellattribut auf endet .jpg, Dann findet der benachbarte Selektor das daneben liegende Element. In diesem Fall die figcaption wird mit hinzugefügt # a8b700 Hintergrundfarbe.
Und hier sind alle Codes für die übrigen Bildformate .png und .gif.
img [src $ = ". png"] + figcaption background-color: # 389abe; img [src $ = ". gif"] + figcaption Hintergrundfarbe: # 8960a7;
Sehen wir uns nun den Live-Link unten an, oder Sie können die Quelle herunterladen, um sie offline zu untersuchen.
- Demo
- Quelle herunterladen
Bildquellen sind wie folgt: MacPro 1, MacPro 2 und MacPro 3
Fazit
Wir hoffen, dass Sie die elegante Seite des Stylings mit einem speziellen Selector sehen können, wie wir es zuvor mit dem Attributselektor gezeigt haben. Wenn Sie also das nächste Mal Ihren HTML-Code gestalten, empfehlen wir Ihnen dringend, zu prüfen, ob Ihr Styling mithilfe eines speziellen Selektors angewendet werden kann, anstatt das strukturierte Markup mit zusätzlichen Funktionen zu ruinieren Klassen oder Ich würde.
Es gibt tatsächlich zwei weitere neue Selektoren dieses Typs, die wir in den nächsten Beiträgen behandeln werden, also bleibt dran.
