gérer les identifiants CSS et les classes avec des espaces

J'ai un paragraphe comme

<p id="para one" class="paragraph one">Content</p>

Comment fait-on pour représenter les id et class avec des espaces dans le css

Lorsque j'utilise

#para#one{
}

.paragraph.one{
}

Il ne fonctionne pas avec le css ci-dessus.

source d'informationauteur user1212

  1. 9
    class="paragraph one"

    représente en fait deux classes différentes

    id="para one"

    ne fonctionne pas, mais vous allez probablement finir par avoir une identification réelle de para

  2. 27

    Viens de tomber sur ce un moi-même (style d'une page existante avec aucun moyen de changer l'id).

    C'est ce que j'ai utilisé pour le style par id:

    p[id='para one']{
}

    Et, comme dit précédemment, .paragraph.one sélectionne deux classes - ce qui signifie qu'il sera également sélectionner des éléments avec class=" one paragraph" et class="not a paragraph this one".

  3. 25

    Votre classe CSS est correct. Vous n'avez pas de classe avec un espace, vous avez deux classes, "paragraphe" et "un". Votre CSS correctement sélectionne les éléments qui ont à la fois de ces classes:

    .paragraph.one { color: red; }

    C'est une technique utile pour la séparation des facettes de l'élément dans des classes séparées, qui peuvent être combinés individuellement. Notez également que <p class="one paragraph"> trouvera le même sélecteur.

  4. 11

    Vous ne pouvez pas avoir des espaces dans id les valeurs ou les noms de classe. Lorsque vous avez des espaces dans la valeur de la class l'attribut spécifie plusieurs classes qui s'appliquent à cet élément:

    <p class="paragraph one"> <!--Has both "paragraph" and "one" class-->

    Comme pour id les valeurs, les règles (HTML4) de la manière suivante:

    ID et le NOM de jetons doit commencer par une lettre ([A-Za-z]) et peut être
    suivi d'un nombre quelconque de lettres, de chiffres ([0-9]), des tirets ("-"),
    des traits de soulignement ("_"), deux-points ( " :") et des points (".").

    Comme vous pouvez le voir, les espaces ne sont pas valides. Le Spec HTML5 est plus leniant, mais les espaces ne sont pas encore autorisées (italiques ajoutés):

    L'attribut id spécifie son élément d'identifiant unique (ID). L'
    la valeur doit être unique parmi tous les Id de l'élément à la maison de la sous-arborescence
    et doit contenir au moins un caractère. La valeur ne doit pas contenir
    les caractères d'espace    .

  5. 0

    Vous simplement ne peut pas contenir d'espaces. Si vous utilisez un espace cela signifie que vous êtes à l'aide de deux classes différentes. On est para et l'autre est one.

  6. 0

    Les navigateurs modernes supportent id avec des espaces. Donc sur Chrome 54 cela fonctionne:

    p#para\ one {
}

    Et les navigateurs ne prennent pas en charge la [id="..."] de la syntaxe, de sorte

    p[id='para one'] {
}

    ne fonctionne pas dans Chrome 54.