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

Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung mit „i“ in CSS-Attributselektoren

Im Zusammenhang mit CSS-Attributselektoren stellte sich eine Frage zur Bedeutung des Buchstabens „i“ in einem Code Snippet:

[type="checkbox" i]

Antwort:

Das an den Attributwert „checkbox“ angehängte „i“ zeigt an, dass bei der Attributübereinstimmung die Groß-/Kleinschreibung nicht beachtet wird. Es handelt sich um eine in CSS Selectors Level 4 eingeführte Funktion, die eine flexiblere und umfassendere Zuordnung von Elementattributen ermöglicht.

Browser-Unterstützung:

Diese Funktion wird derzeit unterstützt in:

• Chrome 49
• Firefox 47
• Safari 9
• Opera 37 (und möglicherweise frühere Versionen)

Demonstration:

Hier ist eine Beispielcode zur Veranschaulichung der Funktionsweise des Attributs, bei dem die Groß-/Kleinschreibung nicht beachtet wird Matching:

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

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

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

Green if supported, red if not:

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

Wenn Ihr Browser den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung unterstützt, hat das Beispielelement einen grünen Hintergrund. Andernfalls wird es einen roten Hintergrund haben.

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!