Comment ignorer le style css parent ?

Question

Je me demande comment ignorer un style parent et utiliser le style par défaut (aucun). Je vais montrer mon cas spécifique à titre d'exemple, mais je suis assez sûr que c'est une question générale.

#elementId select {
    height:1em;
}

        poisson
        manger
        vaches

Moyens que je ne veux pas utiliser pour résoudre ce problème :

• Je ne peux pas modifier la feuille de style où "#elementId select" est défini, mon module n'y aura pas accès.
• Idéalement, ne pas remplacer le style de hauteur en utilisant l'attribut style.

Par exemple, en utilisant Firebug, je peux désactiver le style parent et tout va bien, c'est l'effet que je recherche.

Une fois qu'un style est défini, peut-il être désactivé ou doit-il être remplacé ?

Answer 1

Vous pourriez le désactiver en le remplaçant par ceci :

hauteur:auto !important;

Answer 2

Il doit être remplacé. Vous pourriez utiliser :

#elementId select.funTimes {
   /* Remplacez les styles ici */
}

Assurez-vous d'utiliser le drapeau !important dans le style CSS par exemple margin-top: 0px !important Que signifie !important en CSS ?

Vous pourriez utiliser un sélecteur d'attribut, mais étant donné que ce n'est pas pris en charge par les anciens navigateurs (comme IE6, etc.), il est préférable d'ajouter un nom de classe

Answer 3

Vous pouvez créer une autre définition plus bas dans votre feuille de style CSS qui inverse essentiellement la règle initiale. Vous pouvez également ajouter "!important" à ladite règle pour vous assurer qu'elle reste en place.

Answer 4

J'ai eu une situation similaire en travaillant sur un site web Joomla.

Ajouté un nom de classe au module à affecter. Dans votre cas:

puis j'ai apporté la modification suivante en une seule ligne dans le css. J'ai ajouté la ligne

#elementId div.classname {style à appliquer !important;}

ça a bien fonctionné!

Answer 5

Il serait logique que CSS ait un moyen d'ajouter simplement un style supplémentaire (dans la section head de votre page, par exemple, qui remplacerait la feuille de style liée) comme ceci :

#elementId select {
    /* éteindre tous les styles (pas de moyen de le faire) */
}

et éteindre tous les styles appliqués précédemment, mais il n'y a aucun moyen de le faire. Vous devrez remplacer l'attribut de hauteur et le définir sur une nouvelle valeur dans la section head de vos pages.

#elementId select {
    height:1.5em;
}