Comment appliquer que certaines règles à son contenu texte et non ses enfants

Question

En bref, j'ai quelque chose comme ceci:

<span class="className"> 
    Text text text <button type="button" class="btn btn-default">Button</button> 
</span> 

.className { 
    font-style: italic; 
    /* more */ 
} 

Je ne voulais le « texte texte texte » pour être en italique, et it works when I was using Bootstrap 3.0.3. Cependant, quand je updated to Bootstrap 3.2.0, ces règles s'appliquent maintenant également au button dans le span. Ce n'est pas le comportement que je voulais.

Je me demande si l'emballage du texte dans un autre span est le seul moyen de le réparer. Cela rendrait le HTML encore plus compliqué et je ne veux pas vraiment le faire. Je peux aussi passer outre explicitement la règle italic:

.className > button { 
    font-style: normal; 
    /* more */ 
} 

Je ne pense pas que ce code peut être facilement maintenable à l'avenir donc je ne considère pas celui-ci.

Existe-t-il un autre moyen d'appliquer ces règles uniquement au contenu du texte, mais pas au bouton? Merci.

Answer 1

Le texte héritera toujours du style du parent (dans ce cas, .className). Je pense que la meilleure option serait tout simplement d'appeler quelque chose comme:

button { 
    font-style: normal; 
} 

Quelque part dans le haut, puisque vous aurez probablement jamais envie d'un bouton italique sur votre page (honnêtement, je pense que ce soit dans un réinitialiser quelque part, mais je n'ai pas choppé les nouveaux styles de Bootstrap 3).