Применение CSS (через МЕНЬШЕ) к модулю по идентификатору не работает

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 для написания кода, который преобразуется в CSS через SIMPLESS. Я попытался прохождения моей желаемой конфигурации CSS через модальный сНу ID в следующем МЕНЬШЕ код:

#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 не имеет для модальной коробки. Вместо этого, если я использую pass 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; 

    } 
} 
} 

Почему правила CSS не передаются при обращении к модулю по идентификатору? Не является ли идентификатор более конкретным, чем класс? Примечание: даже когда я использую! Важно для кода с использованием ID, он не работает.

Будет очень благодарен, если кто-то может мне помочь, хотя это, вероятно, потому, что я сделал что-то глупое. (Контекст, почему мне нужно использовать идентификатор, а не просто класс: мне нужно добавить второй модальный блок, и я хочу, чтобы он имел разные размеры, размеры полей и т. Д.) Спасибо.

EDIT: (ответ на мой собственный глупый вопрос) После вмешиваются с этим кодом, я обнаружил, что следующие работы:

//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 будет ссылаться на область за пределами #playModal div.

Так что все это было всего лишь тривиальной ошибкой, которая заставила меня работать так много часов. Извините, чтобы тратить время на все. Какой способ начать работу с StackOverflow. Но в любом случае спасибо всем за то, что вы пытаетесь мне помочь. Пожалуйста, проголосуйте, чтобы закрыть эту запись.

Answer 1

Вы используете неправильный футляр.

Вы даете элемент идентификатор, playModal

Ваш CSS относится к #playmodal

Css чувствителен к регистру.