web-dev-qa-db-fra.com

Comment puis-je définir un style pour remplacer un autre style conflictuel en CSS?

J'affiche des liens qui sont marqués comme lus dans une base de données lorsqu'un utilisateur clique dessus. Je veux styliser les liens cliqués et non cliqués en fonction des informations de la base de données et non de l'historique du navigateur de l'utilisateur. Jusqu'à présent, lorsque j'utilise:

 10 a:visited {
 11   color: #444;
 12 }
 13
 14 a:link {
 15   font-weight: bold;
 16   color:black;
 17 }
 18
 19 .read {
 20   color: #444!important;
 21 }
 22
 23 .unread {
 24   font-weight: bold!important;
 25   color:black!important;
 26 }

et

<tr class="even">
  <td><a class="read" href="example.com">blah</a></td>
</tr>
<tr class="odd">
  <td><a class="unread" href="example.org">foo</a></td>
</tr>

et un lien a été visité, mais pas à partir de cette page (il est toujours marqué comme non lu dans la base de données), j'obtiens des résultats étranges. Par exemple, seule la couleur fonctionnera, mais pas le poids, etc.

Est-il possible qu'un style remplace un autre en cas de conflit?

Merci!

EDIT: code mis à jour pour clarifier

Solution

 10 a:link,
 11 a:visited {
 12   font-weight: bold;
 13   color: black;
 14 }
 15
 16 a.read {
 17   color: #444;
 18   font-weight: lighter !important; /* omission or even "normal" didn't work here. */
 19 }
 20
 21 a.unread {
 22   font-weight: bold !important;
 23   color: black !important;
 24 }
htmlcssfontslamp
22
Thomas G Henry

Tout d'abord, si vous ne voulez pas que l'historique des navigateurs interfère avec vos styles, utilisez la pseudo-classe: visité pour correspondre au style du lien non visité, puis appliquez simplement les classes manuellement en fonction de vos enregistrements de base de données.

En ce qui concerne les styles en conflit, tout dépend de la spécificité du sélecteur, et si deux avec les mêmes propriétés sont en conflit (ont la même spécificité), le dernier "gagne".

Procédez comme suit: 

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}
6
Jack Sleight

Vous pouvez utiliser la directive! Important. par exemple.

.myClass
{
   color:red !important;
   background-color:white !important;
}

Placez! Important après chaque style comme indiqué ci-dessus lorsque vous devez remplacer tout autre style également appliqué.

32
Ash

Essayer:

a.unread, a:visited.unread {style 1}

a.read, a:visited.read {style 2}
1
Ria

Premièrement, vérifiez votre code HTML pour vous assurer que class="read" et class="unread" sont ajoutés à vos liens.

Deuxièmement, essayez d'ajouter a dans votre .read et .unread Règles CSS:

a.read { /* ... */ }
a.unread { /* ... */ }

Si cela ne fonctionne pas, essayez d'ajouter un espace avant !important. Je ne pense pas que cela soit nécessaire, mais la plupart des exemples que j'ai vus l'inclure.

1
strager

Vous pouvez définir la spécificité de vos sélecteurs CSS.

a { /* style 1 */ }

serait remplacé par

div a { /* style 2 */ }

où div est un élément parent de a

Plus de détails peuvent être trouvés sur Selectutorial .

0
Mark Hurd