显示由用户代理样式表覆盖的属性

Question

显而易见,我不是CSS专家.我上课了

.hidden{
 display:hidden
}

和一个div

<div class="hidden">
</div>

但是在呈现页面时不会隐藏div.当我查看Chrome中的Computed样式时,它表示显示属性已被用户代理样式表覆盖.为什么？

Answer 1

CSS:

.hidden {    
    display: none
}

是正确的语法.

Answer 2

如果您希望元素不可见并且不占用任何空间,您应该这样做:

.hidden { display: none; }

但是,如果你想要隐藏元素,但是让它占用空间,你应该这样做:

.hidden { visibility: hidden; }

有关示例,请参阅此简单演示.

您认为样式被用户代理覆盖的事实是用户代理无法识别您尝试使用的样式(因为它无效).