Les sélecteurs de caractères génériques CSS3 peuvent-ils cibler des éléments dont les noms de classe commencent par une chaîne spécifique ?

Sélecteur de caractères génériques CSS3 pour le préfixe des noms de classe

Est-il possible d'utiliser un sélecteur de caractères génériques pour sélectionner des éléments dont les noms de classe commencent par une chaîne particulière en CSS3 ? Par exemple, nous avons les éléments suivants :

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

Pouvons-nous définir la couleur de tous ces divs sur rouge en une seule fois en utilisant CSS ?

La réponse est oui. Pour y parvenir, vous pouvez utiliser les sélecteurs CSS suivants avec des caractères génériques :

div[class^='myclass'], div[class*=' myclass'] {
    color: #F00;
}

Le sélecteur ^ (caret) correspond aux éléments dont les valeurs d'attribut de classe commencent par la chaîne spécifiée. Dans ce cas, il correspond aux éléments dont les noms de classe commencent par "myclass-".

Le sélecteur * (astérisque) correspond aux éléments dont les valeurs d'attribut de classe contiennent la chaîne spécifiée n'importe où. Cela inclut les éléments qui ont plusieurs noms de classe, dont l'un commence par « maclasse- ».

En combinant ces sélecteurs, vous pouvez cibler tous les éléments dont les noms de classe commencent par ou contiennent la chaîne « maclasse- ». . Cela vous permet de définir leur couleur sur rouge dans une ligne de code CSS.

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!