Comment l'indicateur \'i\' permet-il la correspondance d'attributs insensibles à la casse en CSS ?

Comprendre la signification du « i » dans les sélecteurs d'attributs CSS

Dans le développement Web moderne, les sélecteurs d'attributs CSS jouent un rôle crucial dans le style des éléments en fonction de leurs attributs. L'un de ces attributs est "i", ce qui peut soulever des questions quant à sa signification.

Interprétation du sélecteur CSS [type="checkbox" i]

L'extrait que vous avez fourni, [type="checkbox" i], illustre une fonctionnalité nouvellement introduite dans les sélecteurs CSS niveau 4 : la correspondance d'attributs insensible à la casse. Cette fonctionnalité permet de faire correspondre les attributs quelles que soient les différences de majuscules.

Disponibilité et assistance

Actuellement, cette fonctionnalité est largement prise en charge dans les principales versions des navigateurs :

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

Cependant, il est disponible dans les styles d'agent utilisateur de Chrome depuis la version 39, mais nécessite l'activation de fonctionnalités expérimentales pour une utilisation sur le contenu Web. .

Exemple pour le navigateur Tests

Pour tester la prise en charge de cette fonctionnalité dans différents navigateurs, vous pouvez utiliser l'extrait HTML/CSS suivant :

<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;

Copier après la connexion

}

[data-test="A"] {

background: red;

}

[data-test="a" i] {

background: green;

}

En pris en charge navigateurs, l'élément div sera vert, indiquant une correspondance réussie, insensible à la casse. Sinon, ce sera rouge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!