Maison > interface Web > tutoriel HTML > display: none 不起作用_html/css_WEB-ITnose

display: none 不起作用_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:15:12
original
3752 Les gens l'ont consulté

<html>    <head>        <meta http-equiv="content-type" content='text/html;charset=utf-8'/>        <style>        <!--本页的css样式-->       .reveal * {display: none;}       /*.reveal * {background-color: gray;}*/              .reveal *.handle {display: block;}       .reveal *.handle {background-color: gray;}        </style>    </head>    <body>        <div class="reveal">         <h1 class="handle">Click Here to Reveal Hidden Text</h1>         <p>This paragraph is hidden. It appears when you click on title.</p>        </div>    </body></html>
Copier après la connexion



.reveal * {display: none;}应该是除了.handle元素外都隐藏,为什么display: none不起作用呢?


回复讨论(解决方案)

重叠了,前面类的display就无效。


       .reveal * {display: none;}的效果被.reveal *.handle {display: block;}覆盖了

首先,把这个注释改了,style标签(即CSS)里面的注释是  /*   */ ,改成 /*本页的css样式*/ 
优先级的问题,.reveal *.handle高于.reveal * {display: none;},优先级高的生效



这个不是 css的注意语法  下面一行 样式就被破坏了

3,4楼正解,谢谢了

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal