Подклассы CSS, я делаю это правильно?

Question

.popUp 
{ 
    width: 300px; 
    height: 300px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background-color: white; 
} 
.question .popUp 
{ 
    width: 300px; 
    height: 20px; 
    border: 1px solid black; 
    background-color: black; 
} 

Как вы можете видеть, я пытаюсь сделать класс вопросов подклассом класса popUp. Из того, что я googled, это должно работать, но это не так. Если я это сделаю:

.question 
{ 
    width: 300px; 
    height: 20px; 
    border: 1px solid black; 
    background-color: black; 
} 

Это работает, но это не соответствует действительности.

Answer 1

popup класс parent контейнер, то вы должны выбрать его, как показано ниже ,

.popUp .question 

так синтаксис будет parent space child

Answer 2

Try:

.popUp .question { 
    ... 
} 

Answer 3

Это наоборот, контейнер должен предшествовать содержащейся элемент в определении:

.popUp .question 
{ 
    width: 300px; 
    height: 20px; 
    border: 1px solid black; 
    background-color: black; 
} 

Answer 4

Держите общие стили в базовом классе, а затем добавить специфические/переопределены свойства в подклассе.

.popUp 
{ 
    width: 300px; 
    height: 300px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background-color: white; 
} 

.popUp-question 
{ 
    /*width: 300px; This can move to parent */ 
    height: 20px; 
    border: 1px solid black; 
    background-color: black; 
} 

Использование

<div class="popUp popUp-question"></div> 

Посмотрите на bootstrap documentation, который демонстрирует использование подклассов во многих компонентах. Их соглашения, похоже, включают в себя имя базового класса в подклассе. Например, базовый класс alert и подкласс alert-success.