So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)

Es gibt drei Typen von regulären Matching-Selektoren für Attributwerte:

• [attr^="Wert"]
• [attr$="Wert"]
• [attr*="Wert"]

Diese drei Attributselektoren gleichen Zeichen und nicht Wörtern ab. Das Winkelsymbol ^ , das Dollarzeichen $ und das Sternchen * sind spezielle Bezeichner in regulären Ausdrücken, die jeweils die vorhergehende Übereinstimmung, die folgende Übereinstimmung und jede beliebige Übereinstimmung darstellen.

Durch die Verwendung dieser Selektoren können mit reinem CSS sehr coole Funktionen erstellt werden.
<!-- mehr -->

Zeigt ein kleines Symbol für den Hyperlink und eine Grafik des Dateityps an

Mit dem Front-Matching-Selektor [attr^="val"] kann der Link-Adresstyp des <a> -Elements bestimmt werden, um das entsprechende kleine Symbol anzuzeigen. Die Stile der kleinen Symbole, die Hyperlinks anzeigen, sind wie folgt:

[href] {padding-left: 18px;}
/* Linkadresse*/
[href^="https"],
[href^="//"] {
    Hintergrund: URL("./images/link.png") keine Wiederholung übrig;
}
/* Ankerlink in Webseite */
[href^=""]
    Hintergrund: URL("./images/anchor.png") keine Wiederholung übrig;
}
/* Handynummer und E-Mail */
[href^="tel:"]
    Hintergrund: URL("./images/tel.png") keine Wiederholung übrig;
}
[href^="mailto:"]
    Hintergrund: URL("./images/e-mail.png") keine Wiederholung übrig;
}

Wirkung

Durch die Verwendung von [attr$="val"] und dem anschließenden Abgleichen des Selektors können Sie das kleine Symbol des Dateityps anzeigen. Das CSS lautet wie folgt:

/* Auf die PDF-Datei zeigen */
[href$=".pdf"]
    Hintergrund: URL("./images/pdf.png") keine Wiederholung übrig;
}
/* Laden Sie die ZIP-Datei herunter */
[href$=".zip"] {
    Hintergrund: URL("./images/zip.png") keine Wiederholung übrig;
}
/* Bildlink*/
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"]
    Hintergrund: URL("./images/image.png") keine Wiederholung übrig;
}

Die Wirkung ist wie folgt

Suchfiltertechnologie für CSS-Attributselektoren

Wir können Attributselektoren verwenden, um Suchfiltereffekte wie Adressbücher und Städtelisten zu erzielen. Dies ist leistungsfähiger und erfordert weniger Code.

Die HTML-Struktur ist wie folgt:

<input type="search" id="input" placeholder="Geben Sie den Städtenamen oder Pinyin ein" />
<ul>
    <li data-search="Stadt Chongqingchongqing">Stadt Chongqing</li>
    <li data-search="Stadt Harbinhaerbin">Stadt Harbin</li>
    <li data-search="Stadt Changchunchangchun">Stadt Changchun</li>
    <li data-search="Stadt Changshachangsha">Stadt Changsha</li>
    <li data-search="Schanghai">Shanghai</li>
    <li data-search="Stadt Hangzhouhangzhou">Stadt Hangzhou</li>
</ul>

Wenn wir an diesem Punkt Inhalt in das Eingabefeld eingeben, können wir den Such- und Übereinstimmungseffekt erzielen, indem wir dynamisch einen CSS-Code basierend auf dem eingegebenen Inhalt erstellen, ohne selbst Code zur Übereinstimmungsüberprüfung schreiben zu müssen.

var eleStyle = document.createElement('Stil');
document.head.appendChild(eleStyle);
// Texteingabefeld input.addEventListener('input', function() {
    var Wert = dieser.Wert.trim();
    eleStyle.innerHTML = Wert? '[data-search]:nicht([data-search*="' + Wert +'"]) { Anzeige: keine; } ' : '';
});

Damit ist dieser Artikel über die clevere Verwendung von CSS-Attributwert-Selektoren mit regulärer Übereinstimmung (Tipps) abgeschlossen. Weitere relevante Inhalte zu CSS-Attributwert-Selektoren mit regulärer Übereinstimmung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!