Was ist der Zweck des „i'-Flags in CSS-Attributselektoren?

Was bewirkt das „i“ in einem CSS-Attributselektor?

In CSS stoßen Sie möglicherweise auf einen Attributselektor mit einem angehängten „i“, wie im Folgenden Beispiel aus dem Stylesheet des Google Chrome-Benutzeragenten:

[type="checkbox" i]

Dieses „i“ bezeichnet den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung, eine Innovation, die in CSS Selectors Level eingeführt wurde 4.

Browserkompatibilität

Während diese Funktion derzeit in gängigen Browsern wie Chrome (49), Firefox (47), Safari (9) und Opera (37) unterstützt wird, war dies der Fall Ursprünglich nur in den User-Agent-Stilen von Chrome um Chrome 39 verfügbar. Webentwickler könnten es für Webinhalte aktivieren, indem sie experimentelle Funktionen konfigurieren Flag.

Beispiel

Hier ist eine kurze Demonstration zum Testen der Browserunterstützung:

<!-- Color will be green on supported browsers, red on unsupported -->

<div data-test="A"></div>

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Das obige ist der detaillierte Inhalt vonWas ist der Zweck des „i'-Flags in CSS-Attributselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!