Verwendung regulärer Ausdrücke in CSS-Selektoren

Ja, CSS hat auch reguläre Ausdrücke (Amen)

Zwei leistungsstarke Tools zum Angeben in CSS: Matrizen und reguläre Ausdrücke.

Eigentlich muss uns das nicht überraschen. Schließlich ist CSS auch eine Sprache und reguläre Ausdrücke sind dazu gedacht, auch außerhalb einer bestimmten Sprache nützlich zu sein.

Einige allgemeine Regeln für reguläre Ausdrücke

Die Regeln für reguläre Ausdrücke sind unabhängig von der Sprache universell. Der Unterschied kann in der Art und Weise liegen, wie sie geschrieben werden.

Reguläre Ausdrücke sind ein sehr tiefgründiges Thema, und wenn wir wirklich darüber reden wollen, können wir ein dickes Buch schreiben! Es ist schwer, sich das zu merken. Wenn ich es brauche, suche ich einfach bei Baidu …

Darunter gibt es einige Schlüsselzeichen, die spezifische Bedeutungen haben und die Regeln der Welt der regulären Ausdrücke darstellen.

Zum Beispiel:

• Das Zeichen ^ gibt an, dass der Anfang der Zeichenfolge übereinstimmt;
• Das Zeichen $ gibt an, dass die Endposition der Zeichenfolge übereinstimmt;
• Das Zeichen * gibt an, dass jede Position in der Zeichenfolge übereinstimmt.
• Das Zeichen „i“ gibt an, dass bei der Zeichenfolgenübereinstimmung die Groß-/Kleinschreibung nicht beachtet wird.
• Das Zeichen g zeigt eine globale Übereinstimmung der Zeichenfolge an;

usw.

Diese Regeln sind auch in der CSS-Welt universell.

Drei CSS-Attributselektoren und reguläre Ausdrücke

Die Entwicklung von CSS-Attributselektoren gliedert sich derzeit in drei Phasen:

Direkte Übereinstimmung mit dem CSS2.1-Attributselektor: [attr], [attr="val"], [attr~="val"], [attr|="bar"]

Regelmäßige Übereinstimmung des CSS3-Attributselektors: [foo^=”bar”], [foo$=”bar”], [foo*=”bar”]

Der CSS4-Attributselektor ignoriert die Groß-/Kleinschreibung: [attr="val" i]

Unter ihnen gehören die letzten beiden Phasen zur regulären Übereinstimmungsphase. Mit der Entwicklung von CSS sollten komplexere reguläre Übereinstimmungen erscheinen, und wir können abwarten.

Was also bedeuten diese vielen Schreibmethoden zur Attributübereinstimmung?

wie folgt:

[Attribut]

Solange das Element das attr-Attribut hat:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

[attr=”Wert”]
Der Attributname des Elements ist „attr“ und der Wert muss „val“ sein:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

[attr~=”Wert”]

Der „attr“-Wert muss das Wort „val“ enthalten. Beachten Sie, dass hier „Wort“ und nicht „Zeichen“ verwendet wird. CSS wurde von Ausländern erfunden, deren Muttersprache Englisch ist. Englische Sätze bestehen aus einem Wort + Leerzeichen + einem Wort. daher:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

Zum Zeitpunkt von CSS2.1 wurden die Sprachen anderer Länder von CSS noch nicht in dieser Tiefe berücksichtigt. Daher funktioniert das Zuordnen von „Wörtern“ wie hier nur für Zeichen im ASCII-Bereich. Selbst wenn Sie im Chinesischen ein Leerzeichen in die Mitte eines chinesischen Wortes setzen und so tun, als sei es ein „Wort“, ist das nutzlos. daher:

[attr~="Ich"]
<div attr="Ich bin so hübsch"></div>

[attr|=”Balken”]

Der Attributwert „attr“ muss mit dem Wort „bar“ oder mit „bar-“ beginnen. Auch hier handelt es sich um „Wörter“ und nicht um „Zeichen“. Daher haben wir:

<div attr="bar"></div>       
<div attr="bar-val"></div>   
<div attr="barval"></div>    
<div attr="bar val"></div>

Ebenso wird Chinesisch nicht unterstützt. Um Chinesisch zu unterstützen, verwenden Sie bitte CSS3-Attributselektoren.

Die oben genannten CSS2.1-Attributselektoren werden ab dem IE7-Browser unterstützt. Der IE7-Browser wird jedoch nicht vollständig unterstützt.

[attr=^”Wert”]

Die ersten drei Zeichen des Werts müssen val sein, also:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

Sie können das obige [attr|="bar"] vergleichen, um den Unterschied zwischen „Wort“ und „Zeichen“ zu spüren.

[attr$=”Wert”]

Die letzten drei Zeichen des Attributwerts müssen val sein, also:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

[attr*=”Wert”]

Der Attributwert kann an beliebiger Stelle die drei Zeichen val enthalten, also:

<div attr="Wert"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

Die oben genannten drei Attributselektoren gehören zu CSS3, werden aber erstaunlicherweise auch vom IE7-Browser unterstützt. Es ist, als ob der IE8-Browser die Box-Sizing-Funktion von CSS3 unterstützt. Es fühlt sich an, als ob Xiao Ming, der normalerweise 38 Punkte im Test bekommt, plötzlich 61 Punkte bekommt. Ist das unerwartet oder überraschend?

Der letzte Schwergewichtsgast, das Groß-/Kleinschreibung ignorierende i:

[Attribut-Operatorwert i]

Beispielsweise sind [attr~=”val” i], [attr*=”val” I] usw. alles zulässige Schreibweisen. Das „i“ kann auch groß geschrieben werden.
Genau wie die Funktion von i in regulären Ausdrücken ignoriert es Groß- und Kleinbuchstaben. Da Sprachen wie Chinesisch kein Konzept von Groß- und Kleinbuchstaben haben, gilt diese Funktion nur für Zeichen im ASCII-Bereich.

Wir können zum Vergleich ein einfaches Beispiel nehmen, den vorhandenen Selektor [attr*="val"], dann haben wir:

<div attr="VAL"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

Wenn jedoch ein zusätzliches i vorhanden ist, code>[attr*=”val” i], dann gilt:

<div attr="VAL"></div>      
<div attr="Textwert"></div> 
<div attr="Wert"></div>    
<div attr="Wert"></div>

Es kann mit allen Groß- und Kleinbuchstaben übereinstimmen.

Kompatibilität

Derzeit unterstützen Chrome, FireFox und Safari bereits reguläre Ausdrücke, aber der IE ist nach der Überraschung zum ursprünglichen Zustand zurückgekehrt, und selbst IE14 unterstützt immer noch keine Groß-/Kleinschreibung:

Es wird geschätzt, dass diese Funktion bald in tatsächlichen Projekten eingesetzt werden kann.

Beispiele

Sehen heißt glauben. Ich habe eine einfache Demo über den regulären Ausdruck von Selektoren erstellt. Sie können hier klicken: Demo für reguläre Ausdrücke von CSS-Selektoren

Das folgende CSS:

li[Datenindex^='t'] {
    Farbe: rot;    
}
li[data-index^='f'] {
    Farbe: blau;    
}
li[data-index^='f' i]:nach {
    Inhalt: „✓Unterstützung für reguläre Ausdrücke“;
    Farbe: grün;
}

Das Ergebnis im FireFox-Browser:

Es ist ersichtlich, dass ohne Berücksichtigung der Groß-/Kleinschreibung nur ein <li> erfasst werden kann und ein zusätzliches i vorhanden ist, sodass beide abgefragt werden.

Dies ist das Ende dieses Artikels über die Verwendung von regulären Ausdrücken in CSS-Selektoren. Weitere relevante Inhalte zu regulären Ausdrücken für CSS-Selektoren 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!