Was bewirkt der Modifikator „i' in CSS-Attributselektoren?

Enthüllung des Rätsels von „i“ in CSS-Attributselektoren

Im Bereich CSS hat der rätselhafte Buchstabe „i“. tauchten in Attributselektoren auf und ließen viele ratlos zurück. Um sein Geheimnis zu lüften, wollen wir uns mit seinem Zweck befassen und die Bedeutung entdecken, die es für das Web-Styling hat.

Was ist „i“ in einem CSS-Attributselektor?

Der Modifikator „i“ in einem CSS-Attributselektor bedeutet, dass bei der Attributübereinstimmung die Groß-/Kleinschreibung nicht beachtet wird. Diese in CSS Selectors Level 4 eingeführte Funktion ermöglicht eine flexible Zuordnung von HTML-Attributen unabhängig von ihrer Groß- und Kleinschreibung.

Wie funktioniert es?

Bedenken Sie die Folgender Codeausschnitt:

[type="checkbox" i]

Dieser Selektor würde mit allen Checkbox-Eingabeelementen übereinstimmen, unabhängig davon, ob ihr „Typ“-Attribut vorliegt ist in Großbuchstaben, Kleinbuchstaben oder einer Mischung aus beidem geschrieben. Mit anderen Worten, es würde Elemente mit den Attributen „type="Checkbox"', 'type="cHeCkBoX"' usw. abgleichen.

Historischer Kontext und Verfügbarkeit

Der Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung wurde ursprünglich in den User-Agent-Stilen von Chrome eingeführt, konnte aber später durch experimentelle Funktionsflags für Webinhalte aktiviert werden. Seitdem wird es in modernen Browsern weit verbreitet unterstützt, darunter Chrome 49, Firefox 47, Safari 9 und Opera 37 *.

Beispiel und Browsertest

An Um die Funktionalität zu demonstrieren, betrachten wir einen Selektor, der eine grüne Hintergrundfarbe für Elemente mit dem Attribut „data-test="a"“ oder festlegt 'data-test="A"'.

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

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

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

Wenn dieser Code auf den folgenden HTML-Code angewendet wird:

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

Das resultierende Element hat einen grünen Hintergrund, wenn die Groß-/Kleinschreibung nicht beachtet wird Der Attributabgleich wird im Browser unterstützt und rot, wenn nicht.

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