lightbox的CSS

Question

我有一个灯箱。html代码：

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
    <a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->

CSS：

 * /Lightbox background */
 #lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
 /* Lightbox panel with some content */
 #lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#AFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}

当然，demo是完美的。

但是，如果我们删除了lightbox的CSS，http://jsfiddle.net/zhshqzyc/HjCyA/1/表单根本不会改变。我只是想知道lightbox的CSS的功能是什么？

Answer 1

你有没有看到这条评论有什么奇怪的地方？

* /Lightbox background */
#lightbox {

这目前不是一个注释，而是一个非常错误的选择器：

* /Lightbox background */ #lightbox {

让我们来解决这个问题：

/* Lightbox background */
#lightbox {

现在您可以看到#lightbox做了什么:)

http://jsfiddle.net/HjCyA/3/