Comment puis-je styliser des éléments avec des noms de classe commençant par une chaîne spécifique en CSS ?

Styliser des éléments avec des noms de classe commençant par une chaîne spécifique

En CSS3, il est possible d'utiliser un caractère générique pour faire correspondre les éléments dont les noms de classe commencent par une chaîne spécifique. Cela vous permet de styliser plusieurs éléments avec des noms de classe similaires de manière concise et efficace.

Considérez la structure HTML suivante :

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

Pour styliser tous ces divs avec la même couleur, nous pouvons utiliser la règle CSS suivante :

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

Voici comment cette règle works :

• class^='myclass' correspond à tous les éléments dont le nom de classe commence par la chaîne "myclass". Dans ce cas, il sélectionnera les trois div mentionnés ci-dessus.
• class*=' myclass' correspond à tous les éléments dont le nom de classe contient la sous-chaîne "myclass" n'importe où en son sein. Il sélectionnera également les trois divs.

La couleur : #f00; La propriété définit la couleur de tous les éléments sélectionnés sur rouge.

En utilisant cette approche générique, vous pouvez facilement mettre à jour les styles de plusieurs éléments avec des noms de classe similaires sans avoir besoin de spécifier chaque nom de classe individuel dans la règle 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!