9
votes

Héritage CSS et le remplacer

Je suis nouveau à CSS. J'ai créé un site drupal et jouant avec le thème.

J'ai des trucs de fil d'album que je voudrais thème. Si je passe dans Firebug et désactive les propriétés CSS xxx

dans le code ci-dessous xxx

i obtenir le texte à la recherche exactement comment je le veux.

Si j'installez maintenant dans mon style.css qui hérite du code et post xxx

Le formatage je ne sais pas vouloir être conservé. Si je spécifie .Breadcrumbs .inner dans le style.css ne le permet pas de la définir à nouveau et de remplacer ce qui a été spécifié plus haut dans la cascade?

Si ce n'est pas le cas est-ce que j'arrête l'héritage sans changer la feuille de style?

merci,

andrew

info supplémentaire

Voici ce que j'ai au moment

Entrez l'image Description ici

C'est ce que c'est quoi je veux avoir Entrez la description de l'image ici

css

2 commentaires

Utilisez! Important après chaque propriété que vous souhaitez remplacer. Comme Affichage: Inline! IMPORTANT;


@BoltClock Je sais que c'est une mauvaise pratique. Alternativement, il suffit de réinitialiser les propriétés ferait bien, je suppose que si c'est exactement le même sélecteur et défini après le premier, en utilisant par exemple arrière-plan: transparent; devrait remplacer la première déclaration.


3 Réponses :


8
votes

Vous ne remplacez pas les 3 styles que vous souhaitez modifier, de sorte que les originaux sont maintenus. Ce que vous voulez probablement faire, c'est avoir votre style.CSS définit quelque chose comme ceci: xxx


3 commentaires

Merci pour la réponse que j'ai essayé cela, rafraîchis le cache, etc. Et il n'y avait pas de changement à quoi d'autre devrais-je essayer?


@Andrew: basé sur les captures d'écran que vous avez ajoutées, style.css ne contenait aucune définition pour .Breadcrumbs .inner Lorsque vous dites que vous avez rafraîchi le cache, avez-vous vide tous vos fichiers Internet temporaires puis rechargez-vous la page. Essayez également + F5, parfois F5 seul ne le fait pas. Autre que cela, je vérifierais que vous vérifiez que vos liaisons CSS dans l'ordre de votre choix (c.-à-d.: Style.CSS après gris.css)


Juste une note latérale, sur Chrome, vous pouvez cliquer avec le bouton droit de la souris sur le bouton Actualiser et choisir le cache vide et la recharge dure.



4
votes

Si vous spécifiez les styles CSS pour les mêmes classes deux fois, le style résultant est une union des attributs définis dans les deux classes. Pour supprimer les styles précédents, vous devez redéfinir les attributs.


1 commentaires

Merci pour la réponse pourriez-vous clarifier un peu plus ce que vous voulez dire? Je ne sais pas si j'ai eu de la chance, mais quand j'ai suivi une méthode similaire que j'ai indiquée dans mon post original, les modifications appliquées.



3
votes

Si, par exemple, vous avez ces CSS connecté à votre document HTML xxx pré>

si vous avez la même classe dise .Color défini dans les fichiers par défaut.css et postes.css, vous le feriez Imaginez que ce dernier fichier CSS sera utilisé, mais il peut être ignoré si vous l'écrivez comme: p> xxx pré>

Utilisation! Important sur le style hérité des forces de style hérité de style à utiliser, Si vous souhaitez remplacer le style hérité, vous pouvez simplement ajouter! Important à post.css P>

// default.css
.color {
   color: blue !important;
}

// posts.css
.color {
   color: green !important;
}
// In this example the colour would be green.


0 commentaires