通過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的代碼。我試着通過我的期望CSS配置通過模態DIV ID下面的LESS代碼：

#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的代碼中使用！重要，它也不起作用。

如果有人能幫助我，我將不勝感激 - 儘管這可能是因爲我做了一些愚蠢的事情。 （爲什麼我需要使用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-在#playModal裏面的backdrop.fade.in中，現在我明白了.modal-backdrop.fade-in指的是0123號，

所以總而言之，這只是一個微不足道的錯誤，讓我工作了這麼多小時。抱歉浪費大家的時間。在StackOverflow上開始的一種方法。但無論如何感謝大家試圖幫助我。請投票結束這篇文章。

Answer 1

您正在使用錯誤的大小寫。

你給該元素的ID，playModal

你的CSS是指#playmodal

CSS是區分大小寫的。