css - 通过 ID 将 CSS(通过 LESS)应用于模式框不起作用

Question

我是 StackOverflow 的新用户。期待成为您精彩社区的一部分。我的问题如下:

我想在我的网站上使用 Twitter Bootstrap 模式框。但是，我在让 CSS 在模式框上工作时遇到了问题。我编写了以下 HTML 代码:

<div id="playModal" class="modal hide fade">
<div class="modal-header">  
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <span class="login"><strong>Login</strong></span>
</div>  
<div class="modal-body">  
    <form class="form-horizontal" accept-charset="utf-8" method="post" action="#">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="play_form_username">Username</label>
                <div class="controls">  
                    <input type="text" id="play_form_username" name="username" placeholder="Enter your username" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="play_form_password">Password</label>
                <div class="controls">  
                    <input type="password" id="play_form_password" name="password" placeholder="Enter your password" required />
                </div>
            </div>                  
        </fieldset> 
        <span><a href="#">Forgot your password?</a></span>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Play!</button>
        </div>
    </form>
</div>  
<div class="modal-footer">  
    <span>Not a member yet? <a href="#registerModal" role="button" data-toggle="modal" data-backdrop="static">Join Now!</a></span>
    <!--need to find a way to get this modal box to disappear if registerModal is called-->
</div>  
</div>  

接下来，我要配置页面的设计。我正在使用 LESS 编写通过 SIMPLESS 转换为 CSS 的代码。我尝试通过以下 LESS 代码中的模态 div ID 传递所需的 CSS 配置:

#playModal{
width: 300px;
.modal-backdrop,
.modal-backdrop.fade.in{
    opacity: 1;
    filter: alpha(opacity=100);
}
.modal-header{
    .login{
        font-family: arial;
        font-size: 60px;
        font-weight: bolder;
    }
}
.modal-body{
    max-height: 200px;
}
}

这成功编译为 CSS，但是当我使用 Firebug 分析网页时，似乎没有为模态框传递任何 CSS。相反，如果我使用按类传递 CSS 配置，类似于以下内容，它就可以工作。

.modal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
    padding: 7px 15px;
    .login{
        color: #203665;
        font-size: 20px;
        font-weight: bolder;
        line-height: 24px;

    }
}
}

为什么通过ID引用模态框时CSS规则不通过？ ID不是比类更具体吗？注意:即使我在使用 ID 的代码上使用 !important，它也不起作用。

如果有人能帮助我，我将不胜感激——尽管这可能是因为我做了一些愚蠢的事情。 (我需要使用 ID 而不仅仅是类的上下文是:我需要添加第二个模式框，我希望它具有不同的大小、字段大小等。)谢谢。

编辑:(回答我自己的愚蠢问题) 浏览代码后，我发现以下内容有效:

//Settings for all models
.modal-backdrop.fade.in{
opacity: 0.9!important;
filter: alpha(opacity=90)!important;
}

//Settings for playModal
#playModal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
    padding: 7px 15px;
    .login{
        color: #203665;
        font-size: 20px;
        font-weight: bolder;
        line-height: 24px;

    }
}
.modal-body{
    padding: 10px;
    .control-group{
        margin-bottom: 10px;
        .control-label{
            width: 65px;
            text-align: left;
        }
        .controls{
            margin-left: 75px;
        }
    }
    span a{
        display: block;
        margin-top: 0px;
        padding-top: 15px;
        float: left;
        &:hover{
            text-decoration: none;
        }
    }
    .form-actions{
        display: block;
        float: right;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background-color: #FFFFFF;
        .btn{
            font-size: 18px;
            line-height: 24px;
        }
    }
}
.modal-footer{
    padding: 7px!important;
}
}

我认为我做错的是将 .modal-backdrop.fade.in 放在 #playModal 中，现在我明白了 .modal-backdrop.fade-in 指的是区域 < em>在#playModal div 之外。

所以总而言之，这只是一个微不足道的错误，让我工作了这么多小时。抱歉浪费了大家的时间。开始使用 StackOverflow 的好方法。但无论如何，感谢大家试图帮助我。请投票关闭此帖子。

Answer 1

你用错了大小写。

你给元素id，playModal

你的 css 指的是 #playmodal

CSS 区分大小写。