Как передать элемент с идентификатором определенного свойства CSS, если он имеет класс?

Question

Мой HTML:

<div id="login-light" class="bg-green"></div> 

Мой CSS:

#login-light { 
    background-color: red; 
} 

.bg-green { 
    background-color: green; 
} 

, как я могу сделать мой элемент имеет цвет фона зеленым цветом, когда она имеет класс .bg-green? Я знаю, что CSS id имеет приоритет над классом. Я хочу попробовать и сделать это без JavaScript.

Answer 1

Добавить еще selector, что более конкретно:

#login-light.bg-green { 
    background-color: green; 
} 

Answer 2

Вы можете пойти HTMLDog читать на специфичность, резюме является в нижней части страницы. Идентификатор, отмеченный в CSS, более конкретный, чем класс.

Расчет Специфичность

Фактическая специфика группы вложенных селекторов занимает некоторое рассчет. В основном вы даете каждому идентификатору («#whatever») значение 100, каждый селектор классов («.whatever») значение 10 и каждый селектор HTML («что угодно») значение 1. Затем вы добавляете их все и эй престо, у вас есть значение специфичности.

р имеет специфичность 1 (1 селектор HTML) DIV р имеет специфичность 2 (2 HTML селекторов, 1 + 1) .tree имеет специфичность 10 (селектор класса 1) сНу p.tree имеет специфичность 12 (2 HTML селекторы + селектор класса, 1 + 1 + 10)