search

Home  >  Article  >  Web Front-end  >  display: none 不起作用_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:15:123720browse

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：程序、技术、潮流与时尚_html/css_WEB-ITnoseNext article：CSS伪类:focus为何只对个别属性有效？_html/css_WEB-ITnose

Related articles

See more