2010-06-14 14 views
1

j'allais « nid » CSS id s comme celui-ciCSS peut-il coexister "#footer #caption" avec "#content #caption"?

#content #caption { color: teal } 
    ... 

#footer #caption { margin: 2em 1em } 

parce que c'est la façon SASS (un générateur de CSS) peut faire l'imbrication pour ... mais dans un document HTML, nous ne pouvons pas avoir deux id s avec le même nom, n'est pas vrai, donc l'imbrication ci-dessus ne fonctionnera pas ou ne fonctionnera pas bien. (surtout si document.getElementById() ou $ ('# caption') ou $ ('caption') sont nécessaires pour sélectionner l'élément).

Nous pouvons utiliser

#content #content_caption { color: teal } 
    ... 

#footer #footer_caption { margin: 2em 1em } 

mais alors pourquoi 1 plus niveau d'imbrication? pourquoi ne pas simplement

#content_caption { color: teal } 
    ... 

#footer_caption { margin: 2em 1em } 

?

Répondre

4

Le mot "légende" indiquerait qu'il ne s'agit pas d'un identifiant unique. Si c'est le cas, je déclarerais la légende en tant que classe. Seraient tout à fait légal et valide:

#content .caption { color: teal } 
#footer .caption { margin: 2em 1em } 
+0

qui a l'air bien, mais en utilisant beaucoup les classes, ce n'est pas vraiment ce qu'on appelle la "classitis CSS"? –

+0

Bien sûr, vous ne devez jamais trop utiliser cela. Il est peut-être encore mieux d'utiliser les titres si cela semble logique. Ensuite, vous pouvez faire correspondre sur h1 ou h2. – Marc

1

aucune raison pour cela. id est un sélecteur vraiment lourd, il devrait suffire de changer les règles de style. sinon ajoutez le #content avant ou changez les sélecteurs des règles gagnantes.

+0

ce que tu veux dire « lourd »? de quelle manière? –

+0

par exemple: #test {color: red} div {color: green}

asdf
maintenant asdf est rouge car la règle rouge a un sélecteur beaucoup plus puissant. Les ID obtiennent 100 points classes 10 et les éléments 1 si je ne me trompe pas. – antpaw

+0

Cette explication de "points" n'a jamais eu de sens pour moi parce que 11 classes est toujours inférieure à un ID. Vous devez penser à eux comme des choses séparées, vous ne pouvez pas les ajouter ensemble. L'idée générale de "points" est juste à titre d'illustration. –

1

S'il n'y a pas deux éléments avec id = « légende » sur la page, il est tout à fait OK. Cependant, je devine de la dénomination (content & footer) qu'il y en a plus d'un avec id = "caption", ce qui est très mauvais. Vous devez vous rappeler que id doit être unique! utilisation comme

#content .caption { } 
#footer .caption { } 
1

D'abord, au lieu de « classe », quelque chose comme « légende » vraiment ne ressemble plus à une classe:

Vous dites: ce est le ** ** Pied de page (id spécifique), mais c'est ** une ** légende (classe générale).

Voici une autre façon, vous pouvez imbriquer les sélecteurs Sass:

.caption 
    margin: 2em 1em 
    font-weight: bold 
    #footer & 
    background: teal 
    #content & 
    background: red 

(. Les « références » & ce qu'il est contenu dans)