Comment faire pour que 2 fichiers CSS fonctionnent ensemble? - Problème avec! Importantes règles de priorité

Question

J'ai un problème où notre fichier CSS ne joue pas bien avec le CSS dans un wrapper dans lequel nous injectons notre contenu. J'ai quelques règles spécifiées dans notre fichier CSS avec des déclarations! Importantes parce que le CSS du wrapper oblige le navigateur à ignorer mes règles. Malheureusement, cela surcharge les styles dans l'encapsuleur et je ne veux pas qu'il le fasse. Vous pouvez voir un exemple de ce ici:

http://fundcentre.newireland.ie/Results.aspx (notre contenu « RECHERCHE DU FONDS » & ci-dessous)

La déclaration importante dans certaines de mes règles CSS est à l'origine des liens dans la barre de navigation sur la gauche! pour changer de taille lorsque vous passez la souris sur eux. Si je supprime les! Déclarations importantes cependant, les liens dans le tableau & commencent à mal se comporter, en ce sens qu'ils commencent à changer de taille lorsque vous survolez. (pour voir le presse-papiers en action, vérifiez quelques-unes des cases du tableau & cliquez sur "Vérifier votre sélection")

Je sais que notre CSS n'est pas le meilleur, mais quelqu'un pourrait-il suggérer comment je pourrais obtenir les deux pour travailler ensemble? Merci.

J'ai également essayé de préfixer toutes mes règles avec ".content" parce que tout notre contenu existe dans un div avec la classe "content" mais cela n'a eu aucun effet.

Answer 1

En NewIreland.css, ligne 316, vous définissez:

.displaycontent a:link, a:hover, a:visited, a:active { 
    /*...*/ 
    font-size:11px !important; 
    /*...*/ 
} 

... qui définit le style pour les liens à l'intérieur .displayContent, tout lien plané, tout lien visité et tout lien actif.

Il semble que vous dire:

.displaycontent a:link, .displaycontent a:hover, .displaycontent a:visited, .displaycontent a:active { 
    /*...*/ 
    font-size:11px !important; 
    /*...*/ 
} 

Ou, sur un meilleur format:

.displaycontent a:link, 
.displaycontent a:hover, 
.displaycontent a:visited, 
.displaycontent a:active { 
    /*...*/ 
    font-size:11px !important; 
    /*...*/ 
} 

Answer 2

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" /> 

Si deux feuilles de style ont la même déclaration d'élément, elle prendra de la celle qui comprend plus tard.

à savoir si stylesheet.css

a{ 
    color:red; 
} 

et lightbox_new.css

a{ 
    color:blue; 
} 

Puis, en suivant la couleur de code de lien "Check Color" sera bleu.

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" /> 
<a href="http://www.google.co.in">Check Color</a>