Site HTML/CSS problème opacity

Bonjour,
Bonjour,
J'ai suivi une formation HTML5/CSS3 afin de mettre en oeuvre mon site web.
J'ai suivi à la lettre les instructions du formateur.
Le but est de réaliser tout le site sur une seule page web en utilisant les ancres.
La balise ''Contenu'' qui contient les différents ancres ''Accueil'' ''Livres'' ... (position:absolute) est en position:realtive.
J'ai mis tous les ancres en opacity:0 pour qu'il n'apparaît pas tous en même temps! => site vide.
Aprés j'ai rendu l'ancre ''Accueil'' en opacity:1 pour qu'il soit visible!=> Problème : L'Accueil est toujours en premier plan !!
Voici une partie de mon fichier CSS :

#contenu{
height:500px;
width:1085px;
position:relative;
}


#accueil,#livres,#cours,#autoformations,#tutoriels,#divers{
position:absolute;
opacity:0;
}

#accueil{
opacity:1;
}

#accueil:target,#livres:target,#cours:target,#autoformations:target,#tutoriels:target,#divers:target{
opacity:1;
}

J'aimerai avoir vos idées pour que je puisse terminer mon site.