Wie ermöglicht das \'i\'-Flag den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung in CSS?

Die Bedeutung von „i“ in CSS-Attributselektoren verstehen

In der modernen Webentwicklung spielen CSS-Attributselektoren eine entscheidende Rolle bei der Gestaltung von Elementen basierend auf ihren Attributen. Ein solches Attribut ist „i“, das möglicherweise Fragen zu seiner Bedeutung aufwirft.

Interpretation des CSS-Selektors [type="checkbox" i]

Das Snippet, das Sie haben vorausgesetzt, [type="checkbox" i] veranschaulicht eine neu eingeführte Funktion in CSS-Selektoren Level 4: den Attributabgleich ohne Berücksichtigung der Groß- und Kleinschreibung. Diese Funktion ermöglicht den Abgleich von Attributen unabhängig von Unterschieden in der Groß- und Kleinschreibung.

Verfügbarkeit und Support

Derzeit findet diese Funktion breite Unterstützung in allen gängigen Browserversionen:

• Chrome 49
• Firefox 47
• Safari 9
• Opera 37

Es ist jedoch seit Version 39 im Benutzeragentenstil von Chrome verfügbar, erforderte jedoch die Aktivierung experimenteller Funktionen für die Verwendung in Webinhalten .

Beispiel für Browser Testen

Um die Unterstützung dieser Funktion in verschiedenen Browsern zu testen, können Sie das folgende HTML/CSS-Snippet verwenden:

<br>[data-test] {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 100px;
height: 100px;
margin: 4px;

Nach dem Login kopieren

}

[data-test="A"] {

background: red;

}

[data-test="a" i] {

background: green;

}

In unterstützten Browsern ist die Das div-Element ist grün, was auf einen erfolgreichen Abgleich ohne Berücksichtigung der Groß-/Kleinschreibung hinweist. Andernfalls ist es rot.

Das obige ist der detaillierte Inhalt vonWie ermöglicht das \'i\'-Flag den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!