CSS sous-classes, suis-je en train de faire?

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

Comme vous pouvez le voir je suis en train de faire de la question de classe sous-classe de la popUp de classe. De ce que j'ai googlé cela devrait fonctionner, mais il ne le fait pas. Si je fais ça à la place:

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

Il fonctionne, mais qui manque le point.

.question .popUp permettra de cibler les éléments enfants de l'élément .quetion... vous Êtes peut-être à la recherche pour .question.popUp?

OriginalL'auteur Juicy | 2013-09-03

  1. 4

    popup classe est parent conteneur, vous devez le sélectionner en tant que ci-dessous.

    .popUp .question

    donc la syntaxe serait parent space child

    OriginalL'auteur Dipesh Parmar

  2. 3

    Conserver la commune de styles dans la classe de base, puis ajouter spécifiques/substituée propriétés dans la sous-classe.

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

    Utilisation

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

    Prendre un coup d'oeil à la bootstrap, documentation qui illustre l'utilisation de sous-classes dans de nombreux composants. Leurs conventions semble être d'inclure le nom de classe de base dans la sous-classe. Par exemple, la classe de base alert et la sous-classe alert-success.

    OriginalL'auteur Kevin Bowersox

  3. 2

    C'est l'inverse, le conteneur doit venir avant le contenu de l'élément dans la définition:

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

    OriginalL'auteur Paolo Stefan

  4. 1

    Essayer:

    .popUp .question {
    ...
}

    OriginalL'auteur Flame Trap