css - 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 クラスのサブクラスにしようとしています。私がグーグルで調べたところ、これはうまくいくはずですが、そうではありません。代わりにこれを行うと：

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

それは機能しますが、それは要点を逃しています。

Answer 1

基本クラスに共通のスタイルを保持し、サブクラスに特定の/オーバーライドされたプロパティを追加します。

.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>

多くのコンポーネントでのサブクラスの使用を示すブートストラップのドキュメントを見てください。彼らの慣習は、サブクラスに基本クラス名を含めることのようです。たとえば、基本クラスalertとサブクラスalert-successです。

Answer 2

popupクラスがparentコンテナの場合、以下のように選択する必要があります。

.popUp .question 

構文は次のようになりますparent space child

Answer 3

逆に、コンテナーは、定義内の含まれる要素の前に来る必要があります。

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

Answer 4

試す：

.popUp .question {
    ...
}