CSS里面display:none;的用法和效果

[zpjshcn]

最近，我在开发一个网页界面的时候，发现了一个奇怪的现象，就是有人写了一个类，里面用到了display:none; 可是这个类的效果依然显示出来，比如这个类：.tabcontent {width:702px; padding:20px; border:1px solid #aaa; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
} 我只知道，当我们不希望这个class的结构显示的时候，必须写display:none; 为何写了，却还是显示了呢？同时，我还想问，z-index:10到底派啥用场的？按照书上说的，position定位的时候，z-index的值越大就越是显现在上面，那么，我这里只有一个z-index, position的定位也是relative,我的这个 z-index的效果怎么显现啊？最好能举例说明。谢谢。

[dalianzsl]

1.关于display:none;修饰的元素显示的问题 应该是CSS选择器特殊性引起的问题。CSS选择器特殊性有四部分组成，如div p #content选择器的特殊性如下 0 1 0 2 用于内联样式 选择器中的ID数目(#content) 选择器中的类(class)或伪类数目 选择器中的元素或伪元素数目(div和p) 那么，当

p.tabcontent { display: block; } 

.tabcontent {width:702px; padding:20px; border:1px solid #aaa; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}

这两个选择器修饰同一元素时，例如

<p class="tabcontent">这个内容会被显示</p>

由于p.tabcontent的特殊性为0,0,1,1 > .tabcontent的特殊性0,0,1,0，这时，被修饰的p元素会显示出来。 2.z-index这个属性，W3C的文档里面说，相对定位的元素也是可以指定的。可能是由于relative和absolute都能使元素在文档中的位置发生变化，和其他元素发生重叠。

[sxlr918]

1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。 3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题 4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。