Partout sur le web, j'ai trouvé que plusieurs classes css utilisent un espace comme séparateur.
Alors, je suis ÉCRIREcss plusieurs classes - le séparateur propper
<div class="page hidden">
css
.hidden{
display:none;
}
En utilisant le code ci-dessus .hidden est pas caché, mais visible.
Mais en utilisant:
<div class="page, hidden">
.hidden est caché.
Aucune explication!?
Vous faisiez tout correct. La seule explication est que vous avez quelque chose d'autre qui l'affecte que vous n'avez pas mis dans votre question.
Juste pour prouver cela fonctionne:
div {
height:300px;
width:300px;
position:relative;
border-radius:150px;
line-height:300px;
text-align:center;
}
div div {
height:150px;
width:150px;
border-radius:75px;
position:absolute;
top:75px;
left:75px;
line-height:150px;
}
.green {
background-color:green;
}
.red {
background-color:red;
color:white;
}
.hidden {
display:none;
}
.visible:hover .hidden {
display:block;
}<div class="green visible">
<div class="red hidden">
hidden div
</div>
hover here
</div>Les suggestions "Vous avez quelque chose d'autre qui l'affecte" ont été lancées plusieurs fois dans les commentaires ci-dessus. Pas beaucoup de réponse. – j08691
@ j08691 Oui, mais les commentaires ne le prouvent pas. Sur la base de toutes les informations disponibles dans sa forme actuelle, c'est ce que j'ai considéré comme une réponse. –
La seule chose qui prouverait quelque chose est si l'OP a posté un exemple de code complet, ce qu'il n'a pas réussi à faire. Jusque-là, tout ce que nous faisons, c'est spéculer. – j08691
Juste par exemple:
.page{ display:block}
.hidden{
display:none!important;
}
jsFiddle: https://jsfiddle.net/r1us08a3/2/
L'OP n'indique nulle part où ils l'utilisent (actuellement). –
Je l'utilise juste pour un exemple. – user1012181
:) Même j'étais curieux de connaître le problème. Je voulais juste qu'il essaie cela et laissez-nous savoir si le problème persiste. – user1012181
l'ordre d'empilement de votre CSS effectuer les styles qui sont appliqués. De plus, la spécificité des tags utilisés affectera ce que vous voyez à l'avant. de façon un exemple:
/* .hidden is ignored in this example because .page comes after the hidden tag */
.hidden {display:none;}
.page {display: block;}
/* where as this will hold as it's more specific to the page, so will take a higher priority */
body .hidden{display: none;}
/* or this as it's more specific to the exact tags above */
.page.hidden {display: none;}
L'espace est le délimiteur approprié et fonctionne très bien ici http://jsfiddle.net/j08691/r1us08a3/. Êtes-vous sûr de ne pas avoir d'autres règles CSS susceptibles de causer un problème? Pouvez-vous créer un violon qui reproduit le problème? – j08691
mm peut-être que la page a une déclaration importante surchargeant .hidden? –
essayez de mettre '! Important' et voyez si vous surchargez toute autre déclaration. – user1012181