Как переопределить свойство установить в ид (CSS)

Question

Предположим следующий код:

<div id="body" class='bodyLogin'> 

#body { 
    background-color: red; 
} 

Я хотел бы переопределить цвет фона с помощью атрибута класса, например:

#body .bodyLogin { 
    background-color: blue; 
} 

но это не работает.

Аналогично:

.bodyLogin { 
    background-color: blue; 
} 

не работает из-за иерархии CSS.

Answer 1

Пространство между вашими селекторами имеет смысл. На самом деле это селектор: descendant selector. Это означает, что вы выбираете весь класс bodyLoginпотомок элемента с идентификатором body.

Избавиться от пространства, и вы выбираете элементы, которые являются #bodyи.bodyLogin:

#body { 
 
    background-color: red; 
 
} 
 

 
#body.bodyLogin { 
 
    background-color: blue; 
 
}

<div id="body" class='bodyLogin'>Test</div>