Regex -Matching -Attribut -Selektoren

Sie existieren nicht, aber wäre das nicht so cool? Ich habe keine Ahnung, wie schwer es wäre, den Regex zu implementieren oder wie man teuer analysiert zu werden, aber wäre es nicht nur die Bombe?

Nehmen wir an, ich habe eine Reihe von Elementen, alle mit ähnlichen Klassennamen, die ein gemeinsames Styling haben, aber auch individuelle Regeln benötigen, zum Beispiel:

<ul >
	<li ><a href="/">Home</a></li>
	<li ><a href="/products/">Products</a></li>
	<li ><a href="/about/">About</a></li>
</ul>

Ich könnte Bildersatz in diesen Listen-Elementen durchführen, um eine grafische Navigationsleiste zu erstellen, wobei Regeln wie folgt:

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

nicht schlecht, aber wenn die Struktur in der Größe wächst, wächst auch das CSS . Wenn die Struktur sehr groß wäre, würde das CSS gleich ausführlich werden; Ganz zu schweigen von der Tatsache, dass ich es jedes Mal manuell bearbeiten muss, wenn ein neuer Artikel hinzugefügt wird.

Aber was wäre, wenn ich das einfach tun könnte:

#menu li[id%="/^menu-([a-z]+)$/"]
{
	background-image:url(".png");
}

Jetzt sind meine Menüstile unendlich erweiterbar - ich kann eine beliebige Anzahl neuer Elemente hinzufügen, ohne jemals das CSS zu berühren !

Nur ein Gedanke…

häufig gestellte Fragen zu Regex -Matching -Attribut -Selektoren

Was ist ein Regex -Matching -Attribut -Selektor in CSS? Es verwendet regelmäßige Ausdrücke, eine Folge von Zeichen, die ein Suchmuster bilden, um den Attributwerten übereinzustimmen. Diese Funktion ist besonders nützlich, wenn Sie Elemente mit ähnlichen Attributen auf eine bestimmte Weise stylen möchten. Sie können beispielsweise alle Eingabelemente mit einem Typ -Attribut auswählen, das mit "Text" beginnt und einen bestimmten Stil auf sie anwenden. Auf dem Attributnamen folgt ein Match -Operator, der "=", "~ =", "| =", "^=", "$ =" oder "*=" und dann der Attributwert in Zitaten sein kann. Beispielsweise wählt input [type^= "text"] alle Eingabelemente mit einem Typ -Attribut aus, das mit "Text" beginnt. Dies umfasst sowohl Standardattribute wie "Klasse", "ID", "Typ", "href" usw. und benutzerdefinierte Attribute. Denken Sie jedoch daran, dass nicht alle Attribute in allen Browsern unterstützt werden. Daher ist es immer eine gute Idee, die Browserkompatibilität zu überprüfen, bevor Sie ein bestimmtes Attribut verwenden.

Was sind die verschiedenen Match -Operatoren in Regex -Matching -Attribut -Selektoren? Der Bediener "=" übereinstimmt genau, der Bediener "~ =" übereinstimmt jedem platzgetrennten Wert, der "| =" -Operator entspricht jedem vom DASH-getrennten Wert oder dem genauen Wert, der "^=" -Operator entspricht dem Start des Werts "$ =" übereinstimmt mit dem Ende des Wertes "*=". JavaScript? Diese Methoden geben das erste Element oder alle Elemente zurück, die einem bestimmten CSS -Selektor entsprechen. Zum Beispiel wird document.querySelector ('input [type^= "text"]') das erste Eingangselement mit einem Typ-Attribut zurückgeben, das mit "text" beginnt. Sie können sie jedoch für den Fall unempfindlich machen, indem Sie nach dem Attributwert ein "I" hinzufügen. Zum Beispiel wählt Eingabe [Typ^= "text" i] alle Eingabelemente mit einem Typ -Attribut aus, das mit "Text" beginnt, unabhängig von Fall. Beispielsweise wählt die Eingabeelemente input [type^= "text"], input [type^= "Passwort"] alle Eingabelemente mit einem Typ -Attribut aus, das mit "Text" oder "Kennwort" beginnt. Beispielsweise wählt Active alle aktiven Eingabelemente mit einem Typ -Attribut, das mit "Text" beginnt. Es wird keine Fehler verursacht oder den Rest Ihres CSS nicht brechen. Daher ist es eine gute Idee, sie mit Bedacht zu verwenden und Ihre CSS immer auf Leistung zu testen.

Das obige ist der detaillierte Inhalt vonRegex -Matching -Attribut -Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!