Как добавить класс в div для изменения цвета фона?

Question

Итак, у меня есть простая страница входа в систему, которая имеет светло-зеленый фон и хотела бы изменить цвет фона на светло-красный, когда div 'loginbox' с id = 'loginbox' также имеет ошибку класса. Моя страница выглядит следующим образом:

VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png

с relavent HTML выглядит как:

HTML (Перед добавлением класса ошибок):

<div id="loginbox"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

С помощью CSS, приведенной ниже, я чувствую, что это должно работать; однако при добавлении класса ошибки в div ничего не происходит.

CSS:

#loginbox { 
    margin: auto; 
    padding: 25px 50px; 
    width: 300px; 
    height: 100px; 
    border: 1px solid #e9e9e9; 
    background: #EBFFEF; 
} 
#loginbox .error { 
    background: #FFEBEB; 
} 
#loginbox input { 
    height: 15px; 
    margin: 3px 0px; 
    width: 190px; 
    float: right; 
} 
#loginbox span { 
    height: 15px; 
    width: 60px; 
    margin: 3px 0px; 
    padding: 3px 0px; 
    float: left; 
} 
#loginbox button { 
    margin-top: 30px; 
    float: right; 
} 

HTML (После того, как после того, как класс ошибок):

<div class="error" id="loginbox"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

Могу ли я, возможно, злоупотребляя эту технику? Любая помощь в этом вопросе была бы весьма признательна.

Спасибо,
Крис Тайные

Answer 1

Ваш селектор неправилен: #loginbox .error выбирает все элементы с классом error, содержащейся в элемент выбран #loginbox. Это работает точно так же, как работает #loginbox input. Вы выбираете input элементы в пределах#loginbox div.

Чтобы уточнить селектор с дополнительными селекторами класса/атрибута, вам необходимо связать их вместе без пробелов. В вашем конкретном примере, удалите пространство и использовать:

#loginbox.error { ... } 

Всегда помните, разделяющий ваши селекторы пробелов означает, вы выбираете вложенные тег.

Answer 2

проблема здесь:

#loginbox .error { 

#loginbox имеет класс .error, так что вы должны предназначаться, что без пробелов:

#loginbox.error { 

HTML:

<div id="loginbox" class="error"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

Answer 3

Должен работать нормально, если вы измените

#loginbox .error 

в

#loginbox.error 

Добавление пространства означает, что вы стилизации суб-элемент #loginbox.Без пробела мы выбираем <div /> с идентификатором loginbox И с классом error