Css : la répétition de la même classe sur un élément change-t-elle quelque chose au comportement ?

Question

Surtout par curiosité, j'aimerais savoir s'il existe des cas limites qui peuvent survenir dans des cas comme celui-ci :

<span class="class1 class2 class3 class2 class4">...</span>

( class2 est mentionné deux fois)

ou

<span class="class1 class2 class3 class2 class2 class2 class3 class4 class4 class3">...</span>

(une version plus extrême de la même chose)

Il s'agit évidemment de css désordonné et non idéal, mais Y a-t-il des cas limites que cela crée ?

Answer 1

Non, aucun. à moins que vous n'ayez l'habitude d'utiliser la fonction class attribut :

[class="class1 class2"] {
    /* ... */
}

au lieu de :

.class1.class2 {
    /* ... */
}

ce qui est une pratique terrible, bien sûr.

---

Aussi, bien que votre question ne soit pas marquée javascript Si l'on supprime uniquement la première instance d'une classe et que l'on en ajoute un nombre illimité, par exemple :

function addClass(element, cls) {
    element.className += ' ' + cls;
}

mais

function removeClass(element, cls) {
    return element.className.replace(cls, ' ');
}

cela va causer des problèmes à plus d'un titre.

Answer 2

FYI

des navigateurs tels que firefox/chrome/ie9,

calculer les contextes de style en utilisant l'arbre de règles ,

si deux règles ont le même poids, la même origine et la même spécificité, celle qui est écrite plus bas dans la feuille de style l'emporte. . alors ...

styles :

.c1 {background:red;}.c1.c3 {background:blue;}.c2 {background:orange;}

cas1 :

<div class="c1 c1 c1"/><!-- background is red -->

cas2 :

<div class="c1 c2"/><div class="c2 c1 c2"/><!-- background is orange -->

cas3 :

<div class="c2 c1 c1 c2 c3"/><!-- background is blue -->

Answer 3

Non, il n'y a rien mauvais avec ça, à part que ça a l'air bizarre. Toute réoccurrence d'un nom de classe n'affectera rien, jamais. Elle ne "réapplique" pas ces styles après avoir appliqué les styles de la classe définie avant elle ou autre. Rappelez-vous que CSS sélectionnera toujours le style défini dernier pour ce niveau de spécificité.

Voir ceci jsFiddle et notez comment la classe 4 toujours remplace la couleur de la police, quelles que soient les combinaisons de class1, class2 et class3 utilisées.

En fin de compte, il est considéré comme ayant le nom de classe class1, ayant le nom de classe class2, ayant le nom de classe class3, et ayant le nom de classe class4. Les répéter, c'est comme cliquer à nouveau sur le bouton radio. Il est déjà sélectionné, pas besoin de continuer à cliquer dessus...