J'essaie actuellement de changer la couleur d'un titre en référençant une classe d'une div.
jusqu'à présent, j'ai essayé: p>
p>
h1 {
color: purple;
}
3 Réponses :
Ajouter "! Important" après le code de couleur Touy
couleur: violet! IMPORTANT;
Je vois votre code et sa méthode correcte pour modifier cette couleur, alors essayez d'abord ma liste de contrôle et donnez-nous vos commentaires.
Comme mentionné par mon commentaire, cela ressemble à un cas classique de "CSS écrasement". L'un des "hacks" pour éviter cela, est d'utiliser la propriété CSS CSS applique le style de la manière qu'elle est chargée. Donc, si vous avez 1 fichier CSS avec X Règles et un fichier 2e CSS avec des règles Y, et ils ciblent tous les deux les mêmes éléments, le fichier CSS chargé de la dernière fois remplacera généralement les styles de celui précédent. P> La commande est connue sous le nom de la règle top-down em> et est uniquement écrasée par le Compte tenu des informations sur la règle top-down em> et vous avez les moyens d'éditer le CSS et / ou de choisir l'ordre de la manière dont le CSS est chargé, vous pouvez vous assurer que vous pouvez appliquer vos propres règles CSS en leur permettant de charger le dernier fichier inclus de votre projet. p> Exemple: P> ! Important code> pour indiquer au navigateur que la règle CSS est particulièrement importante em> et ne doit pas être écrasée. Exemple: Couleur: Violet! IMPORTANT; CODE> P> ! Important code> Propriété EM> en ligne em> CSS. La propriété ! Important code> écrasera généralement tout CSS en ligne EM> CSS. P> <head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
Vous semblez simplement briller sur tout le classement de la spécificité. Ils jouent un rôle beaucoup plus important que l'ordre des feuilles de style
merci @pete le lien que vous avez fourni dans le commentaire ci-dessus était très utile :)
J'éviterais d'ajouter important autant que je peux. Je voudrais juste aller plus haut les parents et essayer de cibler la DIV aussi spécifique que possible. Au lieu de cela, j'irais
.container h1.pagetitle-title.heading {
color: purple;
}
L'un ou l'autre devrait fonctionner. Qu'est-ce qui ne fonctionne pas à ce sujet?
La façon dont vous avez écrites, sans autre code, cela devrait fonctionner. En outre, dans votre titre, vous dites "basé sur la classe div", mais vous êtes coiffé de la classe Tag H1. jsfiddle.net/hxecbl56
Ressemble à un cas classique de l'écrasement CSS. Vous avez probablement des CSS ailleurs écraser le CSS que vous essayez d'appliquer. Essayez d'ajouter
! Important à la fin de vos règles CSS. C'est à dire.Couleur: Violet! IMPORTANT; .Merci @Martin qui a travaillé pour moi (et Mihai vous avez probablement correct)
Bon, je vais le mettre comme une réponse. @Jblaupunkt
Vous DO Apprenez à utiliser les outils de développement, sinon un problème CSS continuera à vous rendre fou et vous commencerez à appliquer horribles solutions telles que l'utilisation de
! Important (que vous devriez éviter à tous les coûts).Je pense que vous devriez lire cet article, il vous donnera une meilleure compréhension de la raison pour laquelle vos styles ne fonctionnent pas et vous aideront également à voir ce qui se passe lorsque vous utilisez l'outil de développeur d'élément d'inspection CSS-Tricks.com/Specifications-on-CSS-Spécificité
@Jblaupunkt envisagez d'accepter une réponse afin que ce sujet puisse être fermé. :)
@martin vient de fermer désolé! toujours nouveau à Stackoverflow :)