>웹 프론트엔드 >HTML 튜토리얼 >display: none 不起作用_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:15:123754검색

<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>



.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楼正解,谢谢了

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.